html怎么把元素垂直居中显示,HTML+CSS入门 如何令元素垂直居中

本篇教程介绍了HTML+CSS入门 如何令元素垂直居中，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

<

对行内元素而言

要令一个元素内的文字对齐，可将元素的行高(line-height)设置与元素高度一致，主要原理是利用基线的调整

代码如下

These

elements

will be

centered vertically

.demo {

backgroundcolor:black;

padding: 50px;

}

.demo span {

backgroundcolor:gray;

color: white;

padding: 30px 0;

}

当然也可以模拟表格的行为来达到效果

hehe

#out{

width:200px;

height:200px;

background:blue;

display:table;

}

span{

display:tablecell;

verticalalign:middle;

}

模拟表格行为之后对内部元素设置verticalalign:middle.可以达到居中的效果

对块级元素而言

先把HTML布局写出来

个人比较常用的三种方法

绝对定位+内部元素负位移

#out{

position:relative;

}

#inn{

position:absolute;

top:50%;

transform:translateY(50%);  /*这里的transform属性的translate值，设置的50%是相对于内部元素自身宽高而言*/

}

这里的主要过程是先用绝对定位将内部块级元素的左上角定位到外壳元素的中部，在利用transform将其高度再“掰”回来一半(这里的一半是指内部元素高度的一半)，这样就可以刚好使内部元素的中点定位在外壳元素的中点上(也就是取代了原来由于绝对定位后左上角的那个定位点)

弹性布局(个人感觉这是个以后的趋势，毕竟现在都要求响应式，一个弹性布局的确能令网站更加灵活)

#out{

width:200px;

height:200px;

background:blue;

display:flex;                         /*flex布局*/

justify-content:  center;        /*水平居中*/

align-items:    center;    /*垂直居中*/

}

这里我将水平也居中了，弹性布局需要注意的一点就是在外部父元素上设置 display:flex; 使其内部元素形成布局，所以对内部元素进行设置的话只会对更深层次的元素有效，不是对其本身有效。

还看到有人这样用弹性布局

#out{

width:200px;

height:200px;

background:blue;

display:flex;

}

#inn{

width:100px;

height:100px;

background:green;

margin:auto;

}

同样是在外部父元素设置布局，而再对内部元素的margin值设置，这样的话可以利用margin值对其进行想要的定位，不一定是中间(这种定位效果利用绝对定位也可以达到)

绝对居中(据说是利用了CSS的溢出)

#out{

width:200px;

height:200px;

background:blue;

position:relative;

}

#inn{

width:100px;

height:100px;

background:green;

position:absolute;

margin:auto;

top:0;bottom:0;left:0;right:0;

}

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！