10个CSS办法实现元素水平垂直居中 元素不定宽高居中办法

nqkk58

背景

在研发中经常遇到这个问题，即让某个元素的内容在水平和垂直方向上都居中，内容不仅限于文字，可能是照片或其他元素

居中是一个非常基本但又是非常要紧的应用场景，实现居中的办法存在非常多，能够将这些办法分成两个大类：

居中元素（子元素）的宽高已知居中元素宽高未知

实现方式

以下是10种实现元素水平垂直居中的方式：

text-align:center 块状元素，水平居中(只适用于块级元素,块级元素内的行内元素能够居中或将此行内元素设置为块级元素)margin:0 auto 水平居中 以外边框为参照物，上下外边框距为0，上下外边框距浏览器会自动计算平分line-height 垂直居中 经过设置行间距。line-height只适用于单行文本的元素，多行元素不适用。float属性+relative定位 给父元素设置float：left ,而后父元素整体向左移动50%（position:relative;left:50%），此时父元素要清除浮动（clear：both）,而后再给子元素整体向左移动50%(position:relative;left:-50%)按照绝对定位absolute+margin实现水平居中 给父元素一个相对定位relative，利用绝对定位absolute，协同margin：auto自动计算外边距（position: absolute; top: 0;right: 0; bottom: 0; left: 0;margin: auto;）。相针对相对应于relative的绝对定位absolute，必须定宽。relative只是为了给子元素定位用的运用absolute绝对定位+translate 移动转换，实现水平垂直居中 运用百分比来绝对定位一个元素，并协同运用translate，将元素移动定位居中（position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)）。利用table布局，默认垂直居中（vertical-align:middle） 倘若不是table布局的话能够：仿table（display：table-cell）,同样运用vertical-align:middle实现居中对齐flex布局 父元素运用display：flex,设置其属性justify-content.align-items都为center(display: flex; justify-content: center; align-items: center),实现水平居中flex布局+margin 父元素运用flex布局（display：flex）,子元素运用margin：auto利用定位+margin:负值grid布局

绝对定位+transform:translate(-50%,-50%)

.parent{ position:relative; } .son{ position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); }

行内元素

基本思想：单行文本子元素line-height 值为父元素 height 值

.parent { height: 200px; } .son { line-height: 200px; }

行内块级元素

基本思想：元素是行内块级，运用display: inline-block, vertical-align: middle+伪元素处在容器中央

.parent::after, .son{ display:inline-block; vertical-align:middle; } .parent::after{ content:; height:100%; }

利用定位+margin:auto

先上代码：

<st

qzmjef

你的留言真是温暖如春，让我感受到了无尽的支持与鼓励。

vip51888

感谢楼主的分享！我学到了很多。

星☆雨

期待更新、坐等、迫不及待等。