html有多少种居中方式,html常用的几种居中方法

前言

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

布局分类

一、水平居中布局

效果图：

1.inline-block+text-align

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

2.定位 + transform

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

3.display:block + margin:0 auto

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

二、垂直居中布局

效果图：

1.定位+transform

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

2.display:table-cell + vertical-align

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

三、水平垂直居中布局

效果图：

1.定位+transform

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

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

3.flex 布局

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

结尾

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

html有多少种居中方式,html常用的几种居中方法相关推荐

css样式三种引入方式选择器常用属性：背景属性字体属性边框属性内间距外间距盒子模型
一.CSS简介 1.什么是css 重叠样式表主要是负责标签的样式美化页面一个网页分三大部分结构层: 主要由html负责负责页面的结构表现层: 主要由css负责页面的展示样式美化页面行 ...
HTTP的8种请求方式及常用请求方式的解析
一.什么是HTTP? HTTP,即超文本传输协议,是一种实现客户端和服务器之间通信的响应协议,它是用作客户端和服务器之间的请求. 客户端(浏览器)会向服务器提交HTTP请求:然后服务器向客户端返回响应 ...
17种焊接方式大全，精通1种你的工资就能过万
焊接是指通过加热或者加压,或者两者并用:加或不加填充材料:使两分离的金属表面达到原子间的结合,形成永久性连接的一种工艺方法.今天咱们展示一下多种焊接方式!总共有17种,看看你知道的有几种? 1.手弧焊 ...
python采用哪种编码方式_python有哪几种编码方式
python编码方式有:1.ASCII:2.GB2312:3.Unicode:4.UTF-8.ASCII编码的制定是为了显示现代美国英语.为了解决信息交流的要求,可以使用GB2312编码来进行汉语交流 ...
DNS有哪两种域名解析方式？简述这两种方式区别和特点。
DNS的两种域名解析方式:分布域名解析:集中式域名解析区别及特点: 1.分布域名解析是指分在客户端上维护一个静态的文本文件,其中包含主机名和IP地址的映射.随着网络规模的扩大,分布式分辨率的有效性 ...
CSS的三种引入方式与JS的三种引入方式
CSS的三种引入方式前端三剑客分为html,css,js, html作为骨架,楼体是观看者看到的第一元素,而css和js是美化并增加功能的肉体羽毛或者楼体工装,肉体羽毛需要安装到骨架上,才能使整体完 ...
mysql的四种连接方式_数据库的四种连接方式分别是什么
数据库的四种连接方式分别是:1.inner join内连接:2.outer join外连接:3.cross join交叉连接:4.natural join自然连接. 内连接内连接 ---拼接查询结果 ...
面试突击：线程池有几种创建方式？推荐使用哪种？
在 Java 语言中,并发编程都是通过创建线程池来实现的,而线程池的创建方式也有很多种,每种线程池的创建方式都对应了不同的使用场景,总体来说线程池的创建可以分为以下两类: 通过 ThreadPoolE ...
Django中提供了6种缓存方式，你会几种？
开发调试内存文件数据库 Memcache缓存(python-memcached模块) Memcache缓存(pylibmc模块) 1. 开发调试 # 此为开始调试用,实际内部不做任何操作# 配置 ...
实现iframe_单点登录的三种实现方式，你会几种？
阅读本文大概需要 6 分钟. 作者 | 张永恒来源 | http://urlify.cn/RVvaim 前言在 B/S 系统中,登录功能通常都是基于 Cookie 来实现的. 当用户登录成功后,一般 ...

html有多少种居中方式,html常用的几种居中方法

html有多少种居中方式,html常用的几种居中方法相关推荐

最新文章

热门文章