水平居中分为块状元素和行内元素,而块状元素又分为定宽块状元素和不定宽块状元素。
1、行内元素水(display: inline)平居中(文本、图片等)是通过给父元素设置 text-align:center;来实现的。
<p style="text-align: center;">行内元素水平居中</p>
2、定宽块状元素(dispaly: block)水平居中(块状元素的width是一个固定值),满足块状和定宽两个条件时,即可通过给自己设置“左右margin为auto”来实现。
<div style="width: 200px; text-align: center; margin: 0 auto;">定宽块状元素水平居中</div>
3、不定宽块状元素水平居中
1) 改变块状元素的 dispaly 属性为 inline, 然后给父级设置 text-aline:center 来实现水平居中, 这种方法的缺点是不能再给元素设置宽高了
<div style="text-align: center;">
<div style="display: inline;">不定宽块状元素水平居中</div>
</div>
2) 利用绝对定位,让元素向右偏移50%,然后再向左偏移自身的50%
<div style="position: absolute; left: 50%; transform: translateX(-50%);">不定宽块状元素水平居中</div>
3) 利用flex实现水平居中(一)
<div style="display: flex;">
<div style="margin: 20px auto;">不定宽块状元素水平居中</div>
</div>
4) 利用flex实现水平居中(二)CSS3的fit-content配合左右margin为auto实现水平居中方法
<div style="width: fit-content; margin-left: auto; margin-right: auto;">不定宽块状元素水平居中</div>
1.text-align:center 块状元素,水平居中
2.margin:0 auto 水平居中 以外边框为参照物,上下外边框距为0,左右外边框距浏览器会自动计算平分
3.line-height 垂直居中 通过设置行间距。line-height只适用于单行文本的元素,多行元素不适用。
4.float属性+relative定位 给父元素设置float:left ,然后父元素整体向左移动50%(position:relative;left:50%),这时父元素要清除浮动(clear:both),然后再给子元素整体向左移动50%(position:relative;left:-50%)
5.根据绝对定位absolute+margin实现水平居中 给父元素一个相对定位relative,利用绝对定位absolute,配合margin:auto自动计算外边距(position: absolute; top: 0;right: 0; bottom: 0; left: 0;margin: auto;)。相对于相对应于relative的绝对定位absolute,需要定宽。relative只是为了给子元素定位用的
6.使用absolute绝对定位+translate 移动转换,实现水平垂直居中 使用百分比来绝对定位一个元素,并配合使用translate,将元素移动定位居中(position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%))。
7.利用table布局,默认垂直居中(vertical-align:middle) 如果不是table布局的话可以:仿table(display:table-cell),一样使用vertical-align:middle实现居中对齐
8.flex布局 父元素使用display:flex,设置其属性justify-content.align-items都为center(display: flex; justify-content: center; align-items: center),实现水平居中
9.flex布局+margin 父元素使用flex布局(display:flex),子元素使用margin:auto