前端页面中元素的水平垂直居中对齐

元素水平垂直居中对齐

  • 1 文本的水平垂直居中对齐
    • 2 未知父元素宽的情况下水平垂直居中对齐
    • 3未知父元素宽高的情况下另一种方法(已知子元素自身宽高)
    • 4未知宽高情况下
    • 5还有css3中的transform:translate(x,y);

1 文本的水平垂直居中对齐

这是最简单的,直接在元素属性中使用text-align:center ;让文本水平居中,再通过行高:
line-height:元素的高度 ;让文本垂直居中对齐

HTML布局
HTML布局
CSS样式
前端页面中元素的水平垂直居中对齐_第1张图片
效果展示:
前端页面中元素的水平垂直居中对齐_第2张图片

	注意点:text-align是对块元素的特质,内部必须是行内元素等,如果里面div也想水平居中,可以设置display:inline-block;不过此时无法通过line-height来设置div垂直居中

2 未知父元素宽的情况下水平垂直居中对齐

不定宽的父元素居中对齐,使用display:flex属性和margin:auto可以解决
前端页面中元素的水平垂直居中对齐_第3张图片
前端页面中元素的水平垂直居中对齐_第4张图片

3未知父元素宽高的情况下另一种方法(已知子元素自身宽高)

使用子绝父相布局,父元素 position:relative ; 子元素 position:absolutate;top:50%;left:50%;margin-left:-50%(子元素自身宽度);margin-top:-50(子元素自身高度)下面是css代码
前端页面中元素的水平垂直居中对齐_第5张图片
截图效果如下
前端页面中元素的水平垂直居中对齐_第6张图片

4未知宽高情况下

父元素使用flex布局,属性justify-content:center 水平居中,align-items:center;垂直居中
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190315135228713.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MDE3Njkx,size_16,color_FFFFFF,t_70)

在这里插入图片描述

5还有css3中的transform:translate(x,y);

把3中的margin-left和margin-top去掉,加transform即可;

你可能感兴趣的:(初级进阶)