css如何垂直居中

lewis 6年前 (2019-04-07) 阅读数 8 #程序编程

文章标签 css

在css中设置垂直居中的方法：1.使用line-height属性设置垂直居中；2.使用verticle-align属性设置垂直居中；

在css中设置垂直居中的方法

1.使用line-height属性设置垂直居中

页面布局：

<body><divid="out">
<divid="in"></div>
</div>
</body>

css样式：

#in{height:100px;
line-height:100px;
border:solid1px#333;
}

2.使用verticle-align属性设置垂直居中

页面布局：

<body><divid="out">
<divid="in"></div>
</div>
</body>

css样式：

#out{width:600px;
heigth:300px;
}
#in{
width:50%;
height:50%;
display：inline-block;
vertical-align:middle;
}

本文仅代表作者观点，不代表米安网络立场。

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。