在写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
仿冒必究


天天摸鱼,将来有一天会成为摸鱼大佬吗