div在各种情况下的居中

来源：互联网发布：win读取mac硬盘软件编辑：程序博客网时间：2024/05/01 23:37

这里根据以往经验，总结了div居中的各种情况，请大家使劲拍我~

1、水平方向：一般情况下块状元素居中
给div设置宽度，添加margin:0 auto;
例如：

<span style="font-size:14px;">div{width:500px;height:300px;margin:0 atuo;background-color:pink;//为显示效果，添加背景颜色}</span>

2、水平方向：浮动元素的居中
给div设置宽度、高，添加margin
例如：

<span style="font-size:14px;">.div{  width:400px;  height:300px;  float:left;              position:relative;              margin:0 0 0 -200px;                      background-color:pink;              top:50%;              left:50%;                       }</span>

3、水平方向：绝对定位的元素居中

<span style="font-size:14px;">.div{            width:400px;            height:300px;            background-color:pink;            position:absolute;            top:0;            left:50%;            margin-left:-200px;}</span>

4、水平方向：不定宽块状元素的居中
加入table标签，设置display：inline,同时设置position：relative和left：50%（理论上可行，但不推荐这样做，加入table标签会造成一系列问题）

<span style="font-size:14px;">.div{            display:inline;            position:relative;            left:50%;     }</span>

5、水平方向：多个块状元素的居中
将元素的display属性设置为inline-block，并且把父元素的text-align属性设置为center

<span style="font-size:14px;">.parent{            text-align: center;        }.div{            width:100px;            height:100px;            display:inline-block;     }</span>

6、水平居中：多个块状元素解决方案 (使用flexbox布局实现)
使用flexbox布局，只需要把待处理的块状元素的父元素添加属性display:flex及justify-content:center

<span style="font-size:14px;">.parent{            display:flex;            justify-content:center;        }.div{            width:100px;            height:100px;     }</span>

7、垂直居中-父元素高度确定的单行文本

设置父元素的height和line-height高度一致

8、垂直居中-父元素确定的多行文本/图片/块级元素

1)插入table标签，同时设置vertical-align:middle;//IE8以下（不推荐使用table）
2）设置块级元素的display:table-cell,激活vertical-align设置为middle

9、垂直居中-已知高度的块状元素

<span style="font-size:14px;">.div{            top: 50%;            margin-top: -100px;  /* margin-top值为自身高度的一半 */            position: absolute;            padding:0;        }</span>

0 0