在写html网页时，经常会使用居中使得页面更加美观，有很多种方式使元素居中，下面详细讲解各种居中的方法

示例原页面，一个div标签，一个p标签，效果如下

一、水平居中

1.1元素水平居中

1.1.1.margin:0 auto;水平居中

使用条件：

• 居中元素需为块元素(display:block;)
• 给定要居中块元素的宽度
• 居中元素不能设置浮动(float)和定位(postion)

使用方法：给居中元素设置样式magin:0 auto;

效果如下，div盒子和p标签设置了margin:0 auto;属性都居中了

1.1.2.position元素定位水平居中

使用方法:给居中元素父元素设置样式position:releative; 居中元素设置样式position:absolute;left:calc(50% - 自身元素宽度的一半);

效果如下，p标签相对父元素div标签水平居中

1.1.3.flex水平居中

使用方法:给居中元素父元素设置样式display:flex;justify-content: center;

效果如下，p标签相对父元素div标签水平居中

1.2.文本水平居中

1.2.1.text-align文字居中

使用方法:给文本父元素设置样式text-algin:center;

效果如下，p标签内文字水平居中

1.2.2.flex文字水平居中

使用方法:给文本父元素设置样式display:flex;justify-content: center;

效果如下，p标签内文字水平居中

二、垂直居中

2.1元素垂直居中

2.1.1.position元素定位垂直居中

使用方法:给居中元素父元素设置样式position:releative; 居中元素设置样式position:absolute;top:calc(50% - 自身元素高度的一半);

效果如下，p标签相对父元素div标签垂直居中

2.1.2.flex元素垂直居中

使用方法:给居中元素父元素设置样式display:flex;align-items: center;

效果如下，p标签相对父元素div标签垂直居中

2.2文本垂直居中

2.2.1.line-height文本垂直居中

使用方法:给居中元素父元素设置样式line=height: 父元素的高度; 

效果如下，p标签内文本垂直居中

2.2.2.flex文本垂直居中

使用方法:给居中元素父元素设置样式display:flex;align-items: center;

效果如下，p标签相对父元素div标签垂直居中

2.2.3.vertical-align:middle文本垂直居中

使用方法:给文本父元素设置样式display:table-cell;vertical-align:middle;

效果如下，文本垂直居中

转载标明出处
本文链接:https://imold.wang/front-end/htmlcss/397.html
仿冒必究