如何设置DIV水平、垂直居中

简介: 一、水平居中 需要设置两点: 1  设置DIV 的width属性即宽度。 2  设置div的margin-left和margin-right属性即可 代码: DIV居中     二、DIV垂直居中 同样的道理,需要设置两点: 1  设置DIV 的height属性即宽度。

一、水平居中

需要设置两点:

1  设置DIV 的width属性即宽度。

2  设置div的margin-left和margin-right属性即可

代码:

<div style="width:800px; margin-left:auto; margin-right:auto; color:White; height:400px">DIV居中</div>

 

 

二、DIV垂直居中

同样的道理,需要设置两点:

1  设置DIV 的height属性即宽度。

2  设置div的margin-top和margin-bottom属性值为auto即可

目录
相关文章
|
7月前
【冷门骚操作】利用display:table-cell实现div水平、垂直居中
【冷门骚操作】利用display:table-cell实现div水平、垂直居中
|
7月前
|
前端开发
CSS水平居中与垂直居中的方法
CSS水平居中与垂直居中的方法
|
7月前
div盒子垂直居中的3种方法
div盒子垂直居中的3种方法
59 2
|
7月前
|
前端开发
css flex布局两个元素水平居中垂直居中
css flex布局两个元素水平居中垂直居中
125 1
|
前端开发
css设置div水平居中
css设置div水平居中
div盒子水平垂直居中以及表格的居中的方法
div盒子水平垂直居中以及表格的居中的方法
150 0
|
前端开发
CSS水平居中+垂直居中+水平/垂直居中的方法总结
CSS水平居中+垂直居中+水平/垂直居中的方法总结
223 0
CSS水平居中+垂直居中+水平/垂直居中的方法总结
ADI
[记录] CSS-不定宽高水平居中
[记录] CSS-不定宽高水平居中
ADI
98 0
|
前端开发
span内文字居中css布局方法_让span内容居中
display:block,让span形成块(独占一行),就像DIV一样,在设置内容居中css text-align:center。
2808 0
|
前端开发
div 居中方法汇总
居中问题无论在工作还是在面试中, 都是很常见的 下面我来给大家总结几种常用的方法, 大家可根据实际情况选择 好了, 废话不多说, 先看下效果 法1 定位+偏移 (margin) html css .
1059 0