css实现元素水平垂直居中

maliangcoder · maliangcoder · commit ca44047ad87a · 2022-12-07T21:22:22.000+08:00
diff --git a/常用的CSS主流布局案例(1~8)/07_元素水平垂直居中.html b/常用的CSS主流布局案例(1~8)/07_元素水平垂直居中.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>元素水平垂直居中</title>
+  <style>
+    body,
+    html{
+      height: 100%;
+    }
+    .container{
+      border: 1px solid #ddd;
+      height: 100%;
+
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+    .container .img{
+      width: 100px;
+      height: 100px;
+      background-color: #ddd;
+      border-radius: 100%;
+      overflow: hidden;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="img">...</div>
+    <div class="title">...</div>
+    <div class="info">...</div>
+  </div>
+</body>
+</html>
