css 实现盒子模型水平居中
水平居中效果图如下:
html:
css 全局样式:
方法一:使用margin: 0 auto;(只适用于子盒子有宽的时候)
方法二:text-align + display(子盒子有或没有宽度的时候都适用)
方法三:position 定位(只适用于子盒子有宽度和高度的时候)
方法四:position + transform(子盒子有或没有宽高的时候都适用)
方法五:flex 布局(弹性布局)(子盒子有或没有宽高的时候都适用)
css 实现盒子模型垂直居中
垂直居中效果图如下
html 和 css全局样式同上。
方法一:position 定位(适用于子盒子有宽度和高度的时候)
方法二:position + transform(子盒子有或没有宽高的时候都适用)
方法三:flex 布局(子盒子有或没有宽高的时候都适用)
css 实现盒子模型水平垂直居中
水平垂直居中效果图如下
html 和 css全局样式同上
方法一:position 定位(适用于子盒子有宽度和高度的时候)
方法二:position + transform(子盒子有或没有宽高的时候都适用)
方法三:flex 布局(子盒子有或没有宽高的时候都适用)
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
css3 flex布局 justify-content:space-between 最后一行左对齐
网友评论