溫馨提示×

css如何垂直居中

css
養(yǎng)魚的貓咪
178
2021-03-24 14:39:47
欄目: 編程語言

在css中設(shè)置垂直居中的方法：1.使用line-height屬性設(shè)置垂直居中；2.使用verticle-align屬性設(shè)置垂直居中；

css如何垂直居中

在css中設(shè)置垂直居中的方法

1.使用line-height屬性設(shè)置垂直居中

頁面布局：

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

css樣式：

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

2.使用verticle-align屬性設(shè)置垂直居中

頁面布局：

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

css樣式：

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


0 踩