div内部元素居中

klbc 2021-12-19 原文

要让div内部元素垂直居中，则给div加上此css样式：

.div-vertical-middle{
height:200px;
width:304px;
line-height:50px;
vertical-align:middle;
display:table-cell;
}

要让div内部元素水平居中，则给div加上此css样式：

.div-horizontal-middle{
 height:200px;
 width:304px;
 line-height:50px;
 text-align:center;
 display:table; 
}

下面是一段demo：

<html>
<head>
<title>居中测试</title>
<style>
*{
 margin:0;
 padding:0;
}
.div-vertical-middle{
 height:200px;
 width:304px;
 line-height:50px;
 vertical-align:middle;
 display:table-cell; 
}
.div-horizontal-middle{
 height:200px;
 width:304px;
 line-height:50px;
 text-align:center;
 display:table; 
}
.div-middle-out{
 border:2px solid #000;
 width:500px;
 height:500px;
 margin:50px auto;
 display:table; 
}
.div-middle-in{
 text-align:center;
 display:table-cell;
 vertical-align:middle; 
}
</style>
</head>
<body>
<div class="div-vertical-middle" style="background:yellow;">
  <h2>这是垂直居中</h2>
</div>
<div class="div-horizontal-middle" style="background:red;">
  <h2>这是水平居中</h2>
</div>
<div class="div-middle-out" style="background:green;">
  <div class="div-middle-in">
    <h2>水平垂直居中</h2>
  </div>
</div>
</body>
</html>