【前端】这可能是你见过最全的css居中解决方案~

时间：2023-04-02 11:09:43 HTML

1.水平居中：内联元素解决方案适用元素：文本、链接等内联或inline-*类型元素（inline-block、inline-table、inline-flex）html部分代码：

text元素

Css部分代码:nav,div{text-align:center;}/*解决方法：将内联元素包裹在一个display属性中给block的父元素（eg,div,nav）设置这个parent元素属性：text-align:center*//*现在可以看到子元素了在nav和div中水平居中*/2。水平居中：块元素解决方案对于块元素（display:block），我们需要将其左右外边距（即margin-left,margin-right）设置为auto来实现块元素居中，如下：html部分代码:水平居中块元素

水平居中块元素

css部分代码：/*注：需要居中的块元素需要要有固定的宽度，否则不能居中，因为它占了100%的宽度*/div,p{width:200px;/*这里需要设置元素的宽度*/height:150px;背景：#222；color:#FFF;}/*定义居中的关键属性*/.center{/*这里可以设置上边距*/margin:10pxauto;}/*现在可以看到居中效果的块元素了*/3。水平居中：多块元素解决方案如果页面中有多个块元素需要水平居中排列，可以设置元素的display属性设置属性为inline-block，父元素的text-align属性设置为centerhtml中的部分代码：Horizo??ntallycenteredblockelements

Horizo??ntallycenteredblockelements

css部分代码：/*解决方法：设置这些块状元素的display属性为inline-block，父元素的text-align属性设置为center*/.center{display:inline-block;}body{text-align:center;}/*元素美化*/div{width:100px;背景：#222；高度：50px；颜色：#FFF；padding:10px;}4.Horizo??ntalcentering:multipleblockelementssolution(implementedusingflexboxlayout)使用flexbox布局，只需要在块元素的父元素上添加属性display:flex和justify-content:center即可处理。部分html代码：

水平居中块元素

css部分代码：解决方法：设置需要居中的块元素的父元素的显示horizo??ntally到flex，justify-content属性为center。正文{显示：弹性；justify-content:center;}/*页面美化元素*/div{width:100px;背景：#222；高度：50px；颜色：#FFF；填充：10px；，即如果inline、inline-*类型的元素需要居中，可以将其height和line-height同时设置为父元素的高度，达到垂直居中的效果。hello,gbtags.com