CSS实现水平垂直的几种方法
title: CSS实现水平垂直的几种方法
categories: CSS
tags:
- CSS
- HTML
- 面试题
date: 2021-09-11
在HTMl中分为块级元素和内联元素，两者实现居中的方法都 一样，并且块级元素中还要区分定宽高和不定宽高的情况
水平居中
行内元素水平居中
父元素设置 text-align: center
<div class="container"><p>我是内联元素</p>
</div>
<style>
.container{width: 100%;height: 100px;background-color: darkseagreen;/* 父元素是块级元素，直接设置text-align属性 */text-align: center;}
</style>
块级元素水平居中（定宽）
通过设置要居中元素的外边距来实现：margin: 0 auto
<body><div class="father"><div class="son"></div></div>
</body>
<style>.father {background-color: red;width: 500px;height: 500px;}.son {background-color: sandybrown;width: 100px;height: 100px;/* 块级定宽，margin: 0 auto; */margin: 0 auto;}
</style>
块级元素水平居中（不定宽）
子元素设置display: inline,父元素设置text-aling: center（在设置了display: inline后会将该元素显示为行内元素，而inline不能设置宽高和上下外边距，但是可以左右外边距）
<body><div class="father"><div class="son">1111111</div></div>
</body>
<style>.father {background-color: red;width: 500px;height: 500px;text-align: center;}.son {display: inlines;background-color: blue;}
</style>
使用定位属性实现，父元素设置position: relative;，子元素设置position: absolute;、left: 50%;、margin-left: -元素宽度一半
<body><div class="father"><div class="son"></div></div>
</body>
<style>.father {background-color: red;width: 500px;height: 500px;position: relative;}.son {width: 100px;height: 100px;position: absolute;background-color: blue;left: 50%;/* 自己宽度的一半 */margin-left: -50px;}
</style>
使用flex布局实现水平居中在父元素设置display: flex;、justify-content: center;
<body><div class="father"><div class="son"></div></div>
</body>
<style>.father {background-color: red;width: 500px;height: 500px;display: flex;justify-content: center;}.son {width: 100px;height: 100px;background-color: blue;}
</style>
垂直居中
行内元素垂直居中
设置子元素的行高即可实现，若行内元素文本出现换行则需要给父元素添加display: table-cell;、vertical-align: middle;
<!-- HTML -->
<div class="container"><p>单行行内元素</p>
</div><!--CSS-->
<style>
.container{width: 500px;height: 200px;background-color: darkseagreen;<!-- 行内元素换行时添加display: table-cell; vertical-align: middle; -->}.container p{line-height: 200px;}
</style>
块级元素垂直居中（定高）
定宽时，使用定位实现垂直居中。父元素设置position: relative;，子元素设置display:absolute;、left: 50%;、margin-top: -一半高度
<!-- HTML -->
<div class="container"><div></div>
</div><!-- CSS -->
<style>
.container{width: 500px;height: 200px;background-color: darkseagreen;position: relative;}.container div{width: 50px;height: 50px;background-color: rosybrown;position: absolute;top: 50%;margin-top: -25px;}
</style>
块级元素垂直居中（不定高）
需要使用到 transform: translateY(-50%);
<!-- HTML -->
<div class="container"><div>不定高度</div>
</div><!-- CSS -->
<style>.container{width: 500px;height: 200px;background-color: darkseagreen;position: relative;}.container div{width: 50px;background-color: rosybrown;position: absolute;top: 50%;transform: translateY(-50%);}
</style>
使用flex实现垂直居中
<!-- HTML -->
<div class="container"><div>不定高度</div>
</div><!-- CSS -->
<style>
.container{width: 500px;height: 200px;background-color: darkseagreen;display: flex;align-items: center;}.container div{width: 50px;background-color: rosybrown;}
</style>
水平垂直居中
利用定位实现水平垂直居中
父元素设置position: relative;，子元素设置position: absolute;
<!-- HTML -->
<div class="container"><div></div>
</div>
<!-- CSS -->
<style>
.container{width: 500px;height: 200px;background-color: darkseagreen;position: relative;}.container div{width: 50px;height: 50px;background-color: rosybrown;position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;}
</style>
利用flexbox实现水平垂直居中,父元素设置position: relative;，子元素设置position: absolute;
<!-- HTML -->
<div class="container"><div></div>
</div><!-- CSS -->
<style>
.container{width: 500px;height: 200px;background-color: darkseagreen;display: flex;justify-content: center;align-items: center;}.container div{width: 50px;height: 50px;background-color: rosybrown;}
</style>
CSS实现水平垂直的几种方法相关推荐
- CSS图片水平垂直居中的三种方法
CSS图片水平垂直居中的三种方法 设置行高 使用定位和translate 使用弹性盒子 设置行高 我们知道img元素为行内快元素,所以首先设置图片元素的父元素里文字水平居中,行高与整体高度一致. 其次 ...
- CSS实现水平垂直居中的五种方法
前言 今天来看看一个之前困扰我很久的问题,在CSS中,水平垂直居中,能有几种写法. 方法一:margin:auto 子绝父相,当元素绝对定位的时候,会根据最近父元素进行定位,利用这个特性,我们有了这种 ...
- CSS常用水平垂直居中的几种方法
CSS水平垂直居中 一.利用margin:auto 二.利用position: absolute 三.弹性盒子 四.利用水平对齐和行高 五.grid 为方便理解,欢迎查看线上效果,在线试一试 一.利用 ...
- div水平垂直居中的七种方法
学习笔记(一) div水平垂直居中的七种方法 文章目录 学习笔记(一) 前言 一.绝对定位法 1.方法一 2.方法二 3.方法三 4.方法四 二.flex布局法 1.方法五 三.将小div转成行内块 ...
- html flex上下居中,css3 flex实现div内容水平垂直居中的几种方法
一.flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row-reverse (与row 相 ...
- html div 居中心,CSS实现DIV居中的三种方法
下面给大家分享div居中的实现代码,具体代码如下所示: demo .div1{ width: 100px; height: 100px; border: 1px solid #000000;} .di ...
- css实现水平垂直居中的七种方式
css实现水平垂直居中的七种方式 一.使用grid布局 二.使用flex布局 三.使用定位+外边距 四.使用定位+平移 五.使用外边距 + 平移 六.使用文本对齐 + 行高 七.使用表格单元 一.使用 ...
- html如何将图片做成六边形,css画正六边形的两种方法
说下两种css 制作正六边形的方法. 先看一下结果: 在之前要先了解一下正六边形内角和边的关系,正六边形的每个内角是60deg,如图(√3其实是根号3): 方法一:原理把正六边形分成三部分,左中右分别 ...
- html中怎么写正六边形,如何用css画正六边形？用css画正六边形的两种方法（代码实例）...
本章给大家介绍如何用css画正六边形?用css画正六边形的两种方法(代码实例).有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在之前要先了解一下正六边形内角和边的关系,正六边形的每个 ...
最新文章
- 如何用xmanager远程连接centos6.0的桌面
- Eclipse新建SpringBoot后pom.xml代码
- Linux添加用户（user）到用户组（group）
- iOS学习笔记37 时间和日期计算
- 分享Silverlight/WPF/Windows Phone/HTML5一周学习导读(11月28日-12月4日)
- Java并发（一）wait()与notifyAll()
- bat转exe工具 Bat To Exe Converter v2.4.7 绿色版
- 在recovery模式下命令控制手机_安卓手机开机密码忘记，解锁教程
- java中的全等和相似
- GetSystemInfo
- 【Java】转义字符
- 我国的居民身份证号码，由由十七位数字本体码和一位数字校验码组成。请定义方法判断用户输入的身份证号码是否合法，并在主方法中调用方法测试结果。规则为：号码为18位，不能以数字0开头，前17位只可以是数字，
- 王卫的新算盘？顺丰上线专享急件服务，从北京到上海收费上千元
- ubuntu 添加中文拼音输入法【转载】
- 面试题练习（Java基础（二））
- 在Spring Boot中使用数据缓存
- 新新新~Revit插件【建模助手】7大模块介绍
- js-16正则表达式
- Springboot、React集成Okta SAML2单点登录
- 五、Web应用开发模式
热门文章
- R文本挖掘-文章关键词提取
- 经典一百句（俞敏洪推荐）
- hive中生成32位uuid
- 2021年全球潜孔锤钻头收入大约1119.1百万美元，预计2028年达到1382.2百万美元
- 定制石墨相氮化碳量子点(C3N4-R)，g-C3N4量子点修饰的MoO3/TiO2复合膜，Mn掺杂ZnS量子点，核壳结构的绿光 InP/ZnS量子点
- 拦截器重定义及user系统的安全问题
- 分享 孩子，请记住那些比药家鑫更凶恶的人——21世纪经济导报记者周斌写给张妙儿子的一封信（转）...
- Java版本实现对角棋
- 计算机c盘要满了电脑会卡吗,电脑老是用一段时间就C盘空间满啦运行卡的很，问下该如何解决清理C盘？...
- Home Assistant初学者指南 -1之 Home Assistant安装