1. 首页
  2. 问题
  3. CSS垂直和水平对齐（中间和中心）
一尘不染

CSS垂直和水平对齐（中间和中心）

css

我正在练习CSS，却对如何强制将div元素置于页面的中心（vertically和horizontally）感到困惑（这意味着跨浏览器兼容性的一种或多种方式）？

最好的祝福！


阅读 666

收藏
2020-05-16

共1个答案

一尘不染

有很多方法：

  1. 使用固定尺寸使元素的水平和垂直居中对齐

CSS

 <div style="width:200px;height:100px;position:absolute;left:50%;top:50%;
margin-left:-100px;margin-top:-50px;">
<!–content–>
</div>

2。水平和垂直居中一行文本

CSS

<div style="width:400px;height:200px;text-align:center;line-height:200px;">
<!–content–>
</div>

3。没有特定度量的元素的水平和垂直居中对齐

CSS

<div style="display:table;height:300px;text-align:center;">
<div style="display:table-cell;vertical-align:middle;">
<!–content–>
</div>
</div>
2020-05-16