css3怎样设置子元素居中
方法：1、用“父元素{display:flex}”語句設置父元素為彈性布局；2、用“父元素{align-items:center}”語句使子元素垂直居中；3、用“父元素{justify-content:center}”語句使子元素水平居中。
本教程操作環境：windows10系統、CSS3&&HTML5版、Dell G3電腦。
css3怎樣設置子元素居中
我們可以通過display:flex樣式將父元素元素設置為彈性布局，用來為父元素提供最大的靈活性。
align-items 屬性定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。
justify-content 用于設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。
示例如下：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>盒子完美居中</title> <style> .con { width: 300px; height: 300px; border: 1px solid red; margin: 100px auto; display: flex; justify-content: center; /*水平方向的居中*/ align-items: center; /*垂直方向的居中*/ } .box { width: 100px; height: 100px; background-color: pink; } </style> </head> <body> <div class="con"> <div class="box"></div> </div> </body></html>
輸出結果：
（學習視頻分享：css視頻教程）
總結
以上是生活随笔為你收集整理的css3怎样设置子元素居中的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html5标记分为哪几类
- 下一篇： 黑马程序员——iOS学习——启动App界