這篇文章主要講解了“CSS中怎么用flex實現水平垂直居中”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“CSS中怎么用flex實現水平垂直居中”吧！

成都創新互聯是一家專注于成都網站建設、做網站與策劃設計,東方網站建設哪家好?成都創新互聯做網站,專注于網站建設十余年,網設計領域的專業建站公司;建站業務涵蓋:東方等地區。東方做網站價格咨詢:13518219792

基本結構樣式：

.box {

  width: 400px;

  height: 400px;

  background-color: red;

}

.inner {

  width: 100px;

  height: 100px;

  background-color: blue;

}

<div class="box">

  <div class="inner"></div>

</div>

1.利用flex布局

將父元素啟動flex布局，并設置justify-content: center; align-items: center;。

添加樣式：

.box {

  display: flex;

  justify-content: center;

  align-items: center;

}

2.利用flex+margin

父元素設置display: flex;，子元素設置margin: auto;。

添加樣式：

.box { display: flex; }

.inner { margin: auto; }

感謝各位的閱讀，以上就是“CSS中怎么用flex實現水平垂直居中”的內容了，經過本文的學習后，相信大家對CSS中怎么用flex實現水平垂直居中這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創新互聯，小編將為大家推送更多相關知識點的文章，歡迎關注！

當前名稱：CSS中怎么用flex實現水平垂直居中
文章來源：http://vcdvsql.cn/article26/pcdpjg.html

成都網站建設公司_創新互聯，為您提供域名注冊、微信公眾號、品牌網站設計、網站策劃、、動態網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯