居中,是我们编码过程中最常见的,那么,我们平时常见的居中方式,下面一一罗列出来,有错误的地方,望码友多多包涵并加以矫正。

水平居中

1、多块级元素,设置display:inline-block;使之在一行排列,在父级样式里,设置text-align:center;就可以实现水平居中的效果

body {

text-align: center;

}

div{

width: 100px;

height: 100px;

border: 1px solid;

display: inline-block;

}

2、内联元素,利用text-align:center;可以实现块级元素内部的内联元素的水平居中

div {

border: 1px solid red;

width: 100px;

height: 100px;

text-align: center;

}

<div>

<span>块级元素中的行内元素的水平居中</span>

</div>

3、块级元素,通过把固定宽高的块级元素的margin-left和margin-right设置为auto,方可实现

div{

width: 100px;

height: 100px;

border: 1px solid;

margin: 0 auto;

}

<div></div>

4、利用弹性盒子(display: flex;)

给父级定宽定高,然后设置display: flex;以及justify-content: center;方可达到水平居中效果

body {

width: 500px;

height: 500px;

display: flex;

justify-content: center;

border: 1px solid red;

}

div {

width: 100px;

height: 100px;

border: 1px solid;

}

<body>

<div></div>

</body>

垂直居中

1、内联元素(单行)

通过设置元素的height和line-height,方可达到居中效果

2、多行元素,利用表布局(table)

通过给想要居中的元素的父级设置display: talbe-cell;以及vertical-align:enter;方可居中

3、弹性盒子(flex)

给父级设置display: flex;变成弹性盒子。

分两种,

(1),主轴方向为水平,直接设置 align-items: center;

(2),主轴方向为垂直,设置flex-direction: column;改变主轴方向,然后设置justify-content: center;

弹性盒模型主轴不同,居中的方式也不同,灵活应用。

4、固定宽高的块级元素

利用父相子绝的定位原理,实现垂直居中

position: absolute;

left: 50%;

top: 50%;

margin-left: (自身高度的一半);

5,未知宽高的块级元素

利用transform: translateY(-50%);方可实现

position: absolute;

top: 50%;

transform: translateY(-50%);

水平垂直方向的居中

1、固定宽高

通过margin平移整体宽高的一半,实现水平垂直居中

{

position: absolute;

width: 100px;

height: 100px;

border: 1px solid;

left: 50%;

top: 50%;

margin-top: -50px;

margin-left: -50px;

}

2、未知宽高

利用transform中的translate()属性实现

{

position: absolute;

border: 1px solid;

left: 50%;

top: 50%;

transform: translateY(-50%);

transform: translateX(-50%);

}

3、弹性盒子(flex)

通过display:flex,把父级变成弹性盒模型,利用align-items: center;justify-content: center;方可实现居中。

注意:弹性盒子容器中,多行项目的居中方式另加计算。

body {

border: 1px solid;

width: 300px;

height: 300px;

position: relative;

display: flex;

align-items: center;

justify-content: center;

}

div {

border: 1px solid;

width: 100px;

height: 100px;

}

html居中代码(HTML,CSS中,常见的居中方式)

随着学习的不断深入,居中方式可以有很多种,我们要善于利用,更加明确什么情况下用怎样的居中方式。

点赞(0) 打赏

相关推荐

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部