本文主要讲解“如何在css3中将子元素居中”。本文的解释简单明了，易学易懂。接下来，请跟随边肖的思路，深入其中，一起学习和学习“如何在css3中将子元素居中”！
方法：1。使用语句“父元素{display:flex}”将父元素设置为灵活的布局；2.使用语句“父元素{align-items:center}”垂直居中子元素；3.使用语句“父元素{两端对齐-内容：居中}”将子元素水平居中。
本教程操作环境：windows10系统，CSS3HTML5第5版，戴尔G3电脑。
css3怎样设置子元素居中
我们可以通过display:flex样式将父元素设置为灵活的布局，该样式用于为父元素提供最大的灵活性。
align-items属性定义了flex子项在flex容器当前行的横轴(纵轴)方向上的对齐方式。
对齐-内容用于设置或检索弹性框元素在主轴(水平轴)方向上的对齐。
例子如下：
！DOCTYPEhtml
htmllang='en '
头
metachartset=' UTF-8 '/
meta name=' viewport ' content=' width=设备宽度，初始比例=1.0'/
盒子正对着/标题
风格。con{
宽度width:300px
高度：300 px；
border:1pxsolidred
margin:100pxauto
display:flex
justice-content : center；/*水平方向居中*/
align-items : center；/*垂直方向居中*/
}。方框{
宽度width:100px
高度：100 px；
背景-颜色：粉色；
}
/style
/head
身体
divclass='con '
divclass='box'/div
/div
/body
/html html输出结果：
感谢阅读。以上就是“如何在css3中设置子元素中心”的内容。学习完这篇文章，相信你对css3中如何设置子元素中心有了更深的理解，具体用法还需要实践验证。在这里，边肖将为您推送更多关于知识点的文章，敬请关注！
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/149059.html