css怎么水平居中（技术专栏-CSS居中）

1. 最好不使用定位方式，因为它对整体的布局影响很大，现在小编就来说说关于css怎么水平居中?下面内容希望能帮助到你，我们来一起看看吧!

css怎么水平居中

1. 最好不使用定位方式，因为它对整体的布局影响很大。

一：元素水平居中

1. 定宽时，margin方式，必须满足的条件

• 被居中的元素宽固定

• 元素是块级元素或者设置为display:inline-block|block

• 元素的左右margin设为auto

2. 定宽时，定位方式，必须满足的条件

• 元素宽固定

• 元素绝对定位，left为50%

• 元素的margin-left为元素宽的一半（负值）

• 适用于垂直居中，将margin-top设为高的一半

• 水平垂直居中时，将这两个组合起来即可

3. 不定宽时，定位方式，必须满足的条件

• 用css3的transform:translate，让它自己向上向左移动自身宽高的一半

• IE9

4. 文字水平居中

• 单行文字用text-align：center

• 多行文字参照块居中

5. flex布局

• justify-content实现主轴居中

• aign-items实现交叉轴居中

• 结合使用实现水平垂直居中

举个栗子如果块级元素中的行内元素inline | 行内块元素inline-block | inline-table | inline-flex 居中或者文字居中，用text-align:center

transform:translate(0,-50%)即可

2. 单行文本垂直

• 将文本的line-height设置父元素的高度

3. 在不考虑浏览器兼容性问题时，用flex布局是最好的

• 容器flex布局

• 项目的margin为auto

举个栗子单行文本垂直居中

<div class="center"><span>inline hello world</span></div> .center{ width: 500px; height: 200px; border: 1px solid #000; } span{ line-height: 200px; }

定高时，定位方式，垂直居中

.center{ width: 500px; height: 200px; border: 1px solid #000; position: relative; } .block{ width: 200px; height: 100px; border: 1px solid #00f; position: absolute; top:50%; margin-top: -50px; }

三：水平垂直居中

水平垂直居中实际上是水平居中和垂直居中的结合，单独拆分开可以实现某个方位的居中举个栗子flex布局，水平垂直布局

// justify-content和align-items结合使用，实现水平垂直布局 .center{ width: 500px; height: 200px; border: 1px solid #000; display: flex; // 1. 主轴方向，水平居中 justify-content: center; // 2. 交叉轴方向，垂直居中 align-items:center; // 3. 两者结合，水平垂直居中 }

flex布局，水平垂直居中

.center{ width: 500px; height: 200px; border: 1px solid #000; display: flex; } .block{ width: 200px; height: 100px; border: 1px solid #00f; // 1. 每个项目的margin设置为auto，实现水平垂直居中 margin: auto; // 2. 水平居中 margin : 0 auto; // 3. 垂直居中 margin : auto 0; }

定宽高时，绝对定位实现水平垂直居中，常用于弹出框

.center{ width: 500px; height: 200px; border: 1px solid #000; position: relative; } .block{ width: 200px; height: 100px; border: 1px solid #00f; position: absolute; top: 0; left:0; bottom: 0; right: 0; margin: auto; }

不定宽高时，水平垂直居中，定位方式，transform

.center{ width: 500px; height: 200px; border: 1px solid #000; position: relative; } .block{ border: 1px solid #00f; position: absolute; // 1. 单独设置left，translate(-50%,0)即可实现水平居中 // 2. 单独设置top，translate(0,-50%)即可实现垂直居中 left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -0-transform:translate(-50%,-50%); transform: translate(-50%,-50%); }

四：总结

1. 最好不使用定位方式，因为它对整体的布局影响很大。2. 不考虑兼容性时，用flex布局3. 元素被放置在半像素位置时，用transform-style:preserve-3d解决

,