html常用的几种居中方法

举报
khz 发表于 2020/07/01 16:38:18 2020/07/01
【摘要】 前言本篇文章主要介绍如何使用 html+css 实现元素的的水平与垂直的居中效果,这是我们在网页编码过程中经常遇到的问题。布局分类一、水平居中布局效果图:1.inline-block+text-align利用 display:inlin-block 将元素设置为具有文本元素的性质,然后利用文本对齐属性 text-align 来设置对齐方式,center 即为水平对齐2.定位 + transf...

前言

本篇文章主要介绍如何使用 html+css 实现元素的的水平与垂直的居中效果,这是我们在网页编码过程中经常遇到的问题。

布局分类

一、水平居中布局

效果图:
image.png

1.inline-block+text-align

利用 display:inlin-block 将元素设置为具有文本元素的性质,然后利用文本对齐属性 text-align 来设置对齐方式,center 即为水平对齐

image.png

2.定位 + transform

父元素开启定位,子元素设置绝对定位,left 设置为 50%,再使用 transform: translateX(-50%)将子元素往反方向移动自身宽度的 50%,便完成水平居中。

image.png

3.display:block + margin:0 auto

通过对子元素设置便可以实现水平居中,设置 margin 为 auto 表示浏览器自动分配,实现外边距等分

image.png

二、垂直居中布局

效果图:

image.png

1.定位+transform
与水平居中第二种方法相同的原理,利用 top 为 50%,再设置 transform:translateY(-50%),既可以实现垂直居中

image.png

2.display:table-cell + vertical-align

通过设置 display:table-cell 使元素具有 td 元素的行为,使得子元素具有类似文本元素的布局方式,然后在父元素中设置 vertical-align:middle,实现元素的垂直居中

image.png

三、水平垂直居中布局

效果图:

image.png

1.定位+transform
父元素开启定位,子元素设置绝对定位,left 设置为 50%,top 设置为 50%,再使用 transform: translate(-50%,-50%)将子元素往反方向移动自身宽度的 50%,便完成水平垂直居中。

image.png

2.结合水平布局 3,垂直布局 2

image.png

3.flex 布局
使用 flex 布局,align-items:center 垂直居中 ,justify-content:center 水平居中

image.png

结尾

这里仅仅是介绍几种常用的方法,并不是全部,布局方法太多了,还需要慢慢摸索


【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。