css--元素居中常用方法总结
前言
元素居中是日常开发和学习中最常见的问题,同时也是面试中经常考察的知识点,本文来总结一下这方面的知识点。
正文
1、水平居中
(1)子父元素宽度固定,子元素设置 margin:auto,并且子元素不能设置浮动,否则居中失效。
<div class="wrap">
<div class="inner"></div>
</div>
<style>
.wrap {
width: 500px;
background-color: skyblue;
}
.inner {
width: 200px;
height: 100px;
background-color: sandybrown;
margin: auto;
}
</style>
(2)子父元素宽度固定,父元素设置 text-align:center,子元素设置display:inline-block,并且子元素不能设置浮动,否则居中失效。
<div class="wrap">
<div class="inner"></div>
</div>
<style>
.wrap {
width: 500px;
background-color: skyblue;
text-align: center;
} .inner {
width: 200px;
height: 100px;
display: inline-block;
background-color: sandybrown;
}
</style>
2、水平垂直居中
(1)子父元素宽高度固定,子元素相对于父元素绝对定位(子绝父相),子元素 top,left 设置 50%,子元素 margin-top 和 margin-left 减去各自宽高的一半或者 transform :translate(-50%,-50%)。
<div class="wrap">
<div class="inner"></div>
</div>
<style>
.wrap {
width: 500px;
height: 200px;
background-color: skyblue;
position: relative;
} .inner {
width: 200px;
height: 100px;
background-color: sandybrown;
position: absolute;
top: 50%;
left: 50%;
/* transform: translate(-50%, -50%); */
margin-top: -50px;
margin-left: -100px;
}
</style>
(2)子父元素宽高度固定,子元素相对于父元素绝对定位(子绝父相),使用calc达到上面效果。
<div class="wrap">
<div class="inner"></div>
</div>
<style>
.wrap {
width: 500px;
height: 200px;
background-color: skyblue;
position: relative;
}
.inner {
width: 200px;
height: 100px;
background-color: sandybrown;
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 100px); }
</style>
(3)子父元素宽高度固定,子元素相对于父元素绝对定位(子绝父相),子元素上下左右全为 0,然后设置子元素margin:auto。
<div class="wrap">
<div class="inner"></div>
</div>
<style>
.wrap {
width: 500px;
height: 200px;
background-color: skyblue;
position: relative;
}
.inner {
width: 200px;
height: 100px;
background-color: sandybrown;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
</style>
(4)子元素相对定位,子元素 top,left 值为 50%,transform:translate(-50%,-50%)。
<div class="wrap">
<div class="inner"></div>
</div>
<style>
.wrap {
width: 500px;
height: 200px;
background-color: skyblue;
}
.inner {
width: 200px;
height: 100px;
background-color: sandybrown;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
(5)文本水平垂直居中 父元素设置text-algin:center使得子元素水平居中,子元素设置line-height为父元素高度,使得子元素垂直居中。
<div class="wrap">
<span class="inner">321311111111111111</span>
</div>
<style>
.wrap {
width: 500px;
height: 200px;
text-align: center;
background-color: skyblue;
} .inner {
line-height: 200px;
background-color: sandybrown;
}
</style>
(6)利用line-height,vertical-align实现元素水平垂直居中。
<div class="wrap">
<div class="inner">321</div>
</div>
<style>
.wrap {
width: 500px;
height: 200px;
background-color: skyblue;
line-height: 200px;
text-align: center;
}
.inner {
width: 200px;
height: 100px;
background-color: sandybrown;
display: inline-block;/* 将子元素设置为行内块级元素 */
vertical-align: middle;/* 垂直居中 */
text-align: left;/* 默认继承了父元素的水平居中,这里需要修正修正文字 */
}
</style>
(7)父元素设置弹性盒子,display:flex; justfy-content:center ;align-item:center。
<div class="wrap">
<div class="inner"></div>
</div>
<style>
.wrap {
width: 500px;
height: 200px;
background-color: skyblue;
display: flex;
justify-content: center;
align-items: center;
} .inner {
width: 200px;
height: 100px;
background-color: sandybrown;
}
</style>
(8)父元素设置 display:table-cell vertical-align:middle,子元素设置 margin:auto。
<div class="wrap">
<div class="inner"></div>
</div>
<style>
.wrap {
width: 500px;
height: 200px;
background-color: skyblue;
display: table-cell;
vertical-align: middle
}
.inner {
width: 200px;
height: 100px;
background-color: sandybrown;
margin: auto;
}
</style>
(9)网格布局实现水平垂直居中display: grid;place-items: center。
<div class="wrap">
<div class="inner"></div>
</div>
<style>
.wrap {
width: 500px;
height: 200px;
background-color: skyblue;
display: grid;
place-items: center;
} .inner {
width: 200px;
height: 100px;
background-color: sandybrown;
}
</style>
写在最后
以上就是本文的全部内容,希望给读者带来些许的帮助和进步,方便的话点个关注,小白的成长之路会持续更新一些工作中常见的问题和技术点。
css--元素居中常用方法总结的更多相关文章
- CSS元素居中的常用方法
只有普通流和绝对定位的元素可以设置居中,浮动元素是不存在居中的. 1.块级元素居中 1) 普通流元素(position : static 或 position : relative) 水平居中:{ m ...
- Css元素居中设置
你对DIV CSS居中的方法是否了解,这里和大家分享一下,用CSS让元素居中显示并不是件很简单的事情,让我们先来看一下CSS中常见的几种让元素水平居中显示的方法. DIV CSS居中 用CSS让元素居 ...
- css 元素居中
css 4种常见实现元素居中的办法: 1.通过 margin 属性调整 : { position: absolute; top: 50%; left: 50%; margin-left: 盒子的一半: ...
- CSS元素居中汇总
总结实现不同类型元素居中的几种方法: 一.把margin值设置为auto(实现水平居中) 可以实现元素水平居中对齐 原理:使 margin-left=margin-right 如果设置 marg ...
- css元素居中
水平居中 若为行内元素,对其父元素用text-align:center即可: 若为块元素(无浮动),则一般有两种方法可实现对其的水平居中,一为margin:0 auto;二为通过css计算函数calc ...
- css 元素居中方法
目前知道有两种方法 方法一:主要适用于元素未设定高度的情况下. 直接上代码 html: <div class="nav-content"> <ul ng-clic ...
- css 元素居中各种办法
一:通过弹性布局<style> #container .box{ width: 80px; height: 80px; position: absolute; background:red ...
- css元素居中方法
几种居中方式,分情况使用: 1.已知父盒子宽度,子盒子宽度: div{ transform: translate(-50%,-50%); //margin-left: - 自身宽度一半: positi ...
- (前端)面试300问之(2)CSS元素居中【水平、垂直、2者同时居中】
一 仅水平居中 1 行内元素 1)给父元素添加 text-align:center 即可 <div class="parent"> <span class=&qu ...
- css元素居中的几种方式
1.水平居中 <div style="width:200px;margin:0 auto;background-color: yellow;">水平居中</div ...
随机推荐
- turtle setup和screensize
关于setup有明确的定义,它包括4个参数width,height,startx,starty, setup定义窗体的大小和相对位置,并隐含定义了画布的位置,缺省是居中占整个屏幕的一半[setup() ...
- AT4518-[AGC032C]Three Circuits【欧拉回路】
正题 题目链接:https://www.luogu.com.cn/problem/AT4518 题目大意 给出\(n\)个点\(m\)条边的一张简单无向联通图,求能否把它分成三个可重复点的环. \(1 ...
- Initialization failed for 'https://start.spring.io' Please check URL, network and proxy settings.
今天新建一个spring web项目,发现报错了.问题如下. 排除了网络问题,找到了解决办法.打开设置,点击check connection 输入 https://start.spring.io 点击 ...
- 国庆出游神器:魔幻黑科技换天造物,让vlog秒变科幻大片!
摘要:国庆旅游景点人太多,拍出来的照片全是人人人.车车车,该怎么办?不妨试试这个黑科技,让你的出游vlog秒变科幻大片. 本文分享自华为云社区<国庆出游神器,魔幻黑科技换天造物,让vlog秒变科 ...
- 如何基于Jupyter notebook搭建Spark集群开发环境
摘要:本文介绍如何基于Jupyter notebook搭建Spark集群开发环境. 本文分享自华为云社区<基于Jupyter Notebook 搭建Spark集群开发环境>,作者:apr鹏 ...
- redis编译安装、哨兵、集群
编译安装 #下载源代码解压 wget https://download.redis.io/releases/redis-5.0.13.tar.gz -P /home/ tar -xvf /home/r ...
- 2021.7.27--Benelux Algorithm Programming Contest 2020 补提
I Jigsaw 题目内容: 链接:https://ac.nowcoder.com/acm/contest/18454/I 来源:牛客网 You have found an old jigsaw pu ...
- Promise.resolve(x)中x有几种情况
ps:下面参数说的是Promise.resolve(x)中的x 一共四种情况: 1.如果参数是Promise实例本身,则抛出错误 2.如果参数是一个promise对象,则then函数的执行取决于这个参 ...
- 代码混淆保安全「GitHub 热点速览 v.21.43」
作者:HelloGitHub-小鱼干 虽然让代码难以阅读看似是件难以理解的事情,但是混淆后的代码起到了类似加密的作用,而且经过混淆的代码依旧能实现原代码的功能.javascript-obfuscato ...
- VS2019 及 Visual Assist X 安装配置
Visual Studio 2019 安装 下载 https://visualstudio.microsoft.com/zh-hans/downloads/ 安装 设置 扩大 Solution Con ...