css使用教程
css设置居中对齐
文字居中对齐
p {
text-align: center;
}
inline-block元素居中对齐
-
使用display属性将inline-block转换block.
img { display: block; margin:0 auto; }
使用flexbox
flexbox水平、垂直居中都没问题,步骤如下:
-
设置一个容器作为 flexbox
-
在容器中指定内含元素水平居中,使用 justify-content: center
-
在容器中指定内含元素垂直居中,使用 align-items: center
#container { /* 黑色区域 */ background-color: #000; width: 100px; height: 100px; display: flex; justify-content: center; align-items: center; } #item { /* 灰色区域 */ background-color: #ddd; width: 40px; height: 20px; }
如果要让多个元素(#sub-item1, #sub-item2, #sub-item3, …)在保持原有布局的同时在容器内居中,那么就需要用一个
把多个元素包裹起来,使他们成为一个整体(即一个#item)。然后在容器内把这个整体居中。<div id="container"> <div id="item"> <div id="sub-item1"></div> <div id="sub-item2"></div> <div id="sub-item3"></div> </div> </div>
如果不把多个元素包裹进一个div#item,则flexbox会把这些元素都按照指定的方向(沿行/沿列)堆叠,破坏这些元素之间的布局关系
-
CSS3 位移 translate(x, y)
.content{ width:500px; height:300px; border:1px solid #0a3b98; position: relative; } .box{ width:100px; height:40px; background: #f0a238; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); }
获取可视屏幕的高度和宽度
vw (viewpoint width),视窗宽度,1vw=视窗宽度的1%
vh (viewpoint height),视窗高度,1vh=视窗高度的1%
calc() 函数用于动态计算长度值。支持 “+”, “-”, “*”, “/” 运算,使用标准的数学运算优先级规则。
例子:height: calc(100vh - 42px);
注意: 运算符前后都需要保留一个空格,100vh = 视窗高度的100%
不影响padding整体大小
box-sizing:border-box;