display: flex实现元素居中，以及各类居中方法

时间 2020-06-01

标签 display flex 实现元素居中以及各类方法栏目 CSS 繁體版

原文原文链接

近项目开发过程当中须要实现元素居中布局，本身前端水平不是很高非常头痛，问题最终解决。本身记录下解决过程，以便下次查阅。css

一、display :flex 布局(针对chrome浏览器和ie11)html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display detail</title>
    <style> html,body { width: 100%; height: 100%; display: flex; flex-direction: row;/*这里能够不写，flex布局默认方向横向即row*/ justify-content: center; align-items: center; } .div1 { display: flex; justify-content: center; align-items: center; width: 30em; height: 30em; border: 2px solid green; } .div2 { width: 10em; height: 5em; border: 2px solid red; } .div3 { width: 10em; height: 5em; border: 2px solid purple; } </style>
</head>
<body>
    <div class="div1"> div1 <div class="div2"> div2 </div>
        <div class="div3"> div3 </div>

    </div>
</body>
</html>

最终结果：前端

flex布局是我在开发中最新换使用的一种布局手段。chrome

二、经过css的margin等计算来定位（这种本人不是很喜欢，很繁琐）浏览器

.div1 { width: 30em; height: 30em; border: 2px solid green; position: absolute; left: 50%; top: 50%; margin-top: -15em; margin-left: -15em; }

结果:布局

之后会不按期更新flex