1、已知宽高

css已知宽高和未知宽高的居中定位_块级元素

上图中我们想要对已知宽度的“服务范围”进行左右居中定位,我们可以先选择left或者right样式,这里我们选择的是left,这里的50%指的是这个盒子的最左侧位于水平的百分之五十的地方,也就是中间位置,因为我们知道整体的宽度,所以我们可以直接采用在向左移动宽度的一半,也就是margin-left: -175px;如下图,保存刷新之后就水平居中了。

css已知宽高和未知宽高的居中定位_垂直居中_02

2、未知宽高

css已知宽高和未知宽高的居中定位_块级元素_03

上图的滚动圆点我们就不知道他的长度和宽度,首先还是使它的最左侧位于图片的百分之50(left:50%;),最主要的是下面的transform,translate是位移属性。

1.translateX(x):元素在水平方向中移动的距离的单位用px和百分比表示,当x出现正值的时候,表示元素在水平方向右有移动,当x为负值的时候,表示该元素向左移动

2.translateY(y):x是在水平方向上移动,y是在垂直方向上移动,当

y出现正值的时候,说明该元素在向下移动,如果出现负值,说明是向上移动,和我们的正常思维相反。

3.translate(x,y)

通过这个,我们就可以让其居中了

下图就是垂直居中

css已知宽高和未知宽高的居中定位_宽高_04

PS:此外还有许多居中方式

1、多块级元素水平居中

单行文字垂直居中

css已知宽高和未知宽高的居中定位_宽高_05

2、块级元素水平居中

css已知宽高和未知宽高的居中定位_宽高_06

3、内联元素水平居中css已知宽高和未知宽高的居中定位_块级元素_07

4、块级元素水平居中

通过把固定宽度块级元素的margin-left和margin-right设成auto,就可以使块级元素水平居中

5、利用弹性布局(flex)

6、通过设置内联元素的高度(height)和行高(line-height)相等,从而使元素垂直居中



更多内容详见微信公众号:Python研究所

css已知宽高和未知宽高的居中定位_块级元素_08