点击查看【bilibili】

本案就是通过transform,display,vertical-align,text-align这四个属性来实现方框处于相对的中心位置(哪怕你Ctrl+鼠标滚轮也不会变化)

思路

1.用position的绝对位置方法absolute在页面中心一点

2.通过transform的translate来缩小一半从而使方框不会因为长宽而改变位置

3.最后通过text-align来控制文本的在中间位置,vertical-align只会控制元素在中间,所以用display来伪装成表格单元格来显示中间

代码

html

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>垂直和水平对齐文本中心</title>
  9.     <link rel="stylesheet" href="style.css">
  10. </head>
  12. <body>
  13.     <div class="main">
  14.         <div class="content">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae, ex. Excepturi neque quisquam sit unde ipsa ducimus, omnis et nihil harum modi consequatur sapiente quae. Recusandae, a? Maiores, non animi?</div>
  15.     </div>
  16. </body>
  18. </html>

css

body {
  margin: 0;
  padding: 0;
}
.main {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background: #f71772;
  display: table;
  color: #fff;
}
.content {
  padding: 20px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

需要掌握的知识点

display 属性规定元素应该生成的框的类型。

vertical-align 属性设置一个元素的垂直对齐方式

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

text-align 属性规定如何对齐文本。