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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。