水平居中&垂直居中

在用html设计计算器时,对于水平居中和垂直居中很不解,查了一些资料,下面这篇博文内容充实,通俗易懂,我很快就get到了精髓,在阅读之前我先贴上几张做计算器的代码截图,用案例说明一下水平居中的 含义:

要让#keys代表的按键钮空间水平居中,它是块级元素,就可以把它的父元素中设置margin:15px auto;

目录

水平居中

行内元素

块级元素

方案一:(分宽度定不定两种情况)

方案二:使用定位属性

方案三:使用flexbox布局实现(宽度定不定都可以)

垂直居中

单行的行内元素

多行的行内元素

块级元素

水平垂直居中

已知高度和宽度的元素

未知高度和宽度的元素

方案一:使用定位属性

方案二:使用flex布局实现

水平居中

行内元素
首先看它的父元素是不是块级元素,如果是,则直接给父元素设置 text-align: center;

<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
text-align: center;
}
</style>

<div id="father">
    <span id="son">我是行内元素</span>
</div>
如果不是,则先将其父元素设置为块级元素,再给父元素设置 text-align: center;

<style>
#father {
display: block;
width: 500px;
height: 300px;
background-color: skyblue;
text-align: center;
}
</style>

<span id="father">
    <span id="son">我是行内元素</span>
</span>
效果:

块级元素
方案一:(分宽度定不定两种情况)
定宽度:需要谁居中,给其设置 margin: 0 auto; (作用:使盒子自己居中)

<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
}

#son {
width: 100px;
height: 100px;
background-color: green;
margin: 0 auto;
}
</style>

<div id="father">
    <div id="son">我是块级元素</div>
</div>
效果:

不定宽度:默认子元素的宽度和父元素一样,这时需要设置子元素为display: inline-block; 或 display: inline;即将其转换成行内块级/行内元素,给父元素设置 text-align: center;

<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
text-align: center;
}

#son {
background-color: green;
display: inline;
}
</style>

<div id="father">
    <div id="son">我是块级元素</div>
</div>
效果:(将#son转换成行内元素,内容的高度撑起了#son的高度,设置高度无用)

方案二:使用定位属性
首先设置父元素为相对定位,再设置子元素为绝对定位,设置子元素的left:50%,即让子元素的左上角水平居中;

定宽度:设置绝对子元素的 margin-left: -元素宽度的一半px; 或者设置transform: translateX(-50%);

<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
position: relative;
}

#son {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
left: 50%;
margin-left: -50px;
}
</style>

<div id="father">
<div id="son">我是块级元素</div>
</div>
不定宽度:利用css3新增属性transform: translateX(-50%);

<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
position: relative;
}

#son {
height: 100px;
background-color: green;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
</style>

<div id="father">
<div id="son">我是块级元素</div>
</div>
效果:

方案三:使用flexbox布局实现(宽度定不定都可以)
使用flexbox布局,只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;

<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
display: flex;
justify-content: center;
}

#son {
width: 100px;
height: 100px;
background-color: green;
}
</style>

<div id="father">
<div id="son">我是块级元素</div>
</div>
效果:

垂直居中
单行的行内元素
只需要设置单行行内元素的"行高等于盒子的高"即可;

<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
}

#son {
background-color: green;
height: 300px;
}
</style>

<div id="father">
<span id="son">我是单行的行内元素</span>
</div>
效果:

多行的行内元素
使用给父元素设置display:table-cell;和vertical-align: middle;属即可;

<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
display: table-cell;
vertical-align:middle;
}

#son {
background-color: green;
}
</style>

<div id="father">
<span id="son">我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素</span>
</div>
效果:

块级元素
方案一:使用定位
首先设置父元素为相对定位,再设置子元素为绝对定位,设置子元素的top: 50%,即让子元素的左上角垂直居中;

定高度:设置绝对子元素的 margin-top: -元素高度的一半px; 或者设置transform: translateY(-50%);

<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
position: relative;
}

#son {
height: 100px;
background-color: green;
position: absolute;
top: 50%;
margin-top: -50px;
}
</style>

<div id="father">
<div id="son">我是块级元素</div>
</div>
不定高度:利用css3新增属性transform: translateY(-50%);

<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
position: relative;
}

#son {
width: 100px;
background-color: green;
position: absolute;
left: 50%;
transform: translateY(-50%);
}
</style>

<div id="father">
<div id="son">我是块级元素</div>
</div>
效果:

方案二:使用flexbox布局实现(高度定不定都可以)
使用flexbox布局,只需要给待处理的块状元素的父元素添加属性 display: flex; align-items: center;

<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
display: flex;
align-items: center;
}

#son {
width: 100px;
height: 100px;
background-color: green;
}
</style>

<div id="father">
<div id="son">我是块级元素</div>
</div>
效果:

水平垂直居中
已知高度和宽度的元素
方案一:设置父元素为相对定位,给子元素设置绝对定位,top: 0; right: 0; bottom: 0; left: 0; margin: auto;

<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
position: relative;
}

#son {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
</style>

<div id="father">
<div id="son">我是块级元素</div>
</div>
效果:

方案二:设置父元素为相对定位,给子元素设置绝对定位,left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;

<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
position: relative;
}

#son {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
</style>

<div id="father">
<div id="son">我是块级元素</div>
</div>
效果:

未知高度和宽度的元素
方案一:使用定位属性
设置父元素为相对定位,给子元素设置绝对定位,left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);

<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
position: relative;
}

#son {
background-color: green;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
</style>

<div id="father">
<div id="son">我是块级元素</div>
</div>
效果:

方案二:使用flex布局实现
设置父元素为flex定位,justify-content: center; align-items: center;

<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
display: flex;
justify-content: center;
align-items: center;
}

#son {
background-color: green;
}
</style>

<div id="father">
<div id="son">我是块级元素</div>
</div>
效果:

---------------------
作者:杜媛媛
来源:CSDN
原文:https://blog.csdn.net/weixin_37580235/article/details/82317240
版权声明:本文为博主原创文章,转载请附上博文链接!

https://blog.csdn.net/weixin_37580235/article/details/82317240#%C2%A0%E5%9D%97%E7%BA%A7%E5%85%83%E7%B4%A0

原文地址:https://www.cnblogs.com/yanyanstyle/p/11136302.html

时间: 2024-10-10 02:36:53

水平居中&垂直居中的相关文章

css居中-水平居中,垂直居中,上下左右居中

网页布局居中必不可少,其中包括水平居中,垂直居中,上下左右居中,下面一一详述. 水平居中 <div class="container"> <div class="item">居中</div> </div> 1.text-align: center; 对父元素设置text-align: center;子元素即可居中.但子元素是有限制的,只对图片,文字等行内元素有效. 如果子元素有一定宽度,可以设置子元素display:i

16种方法实现水平居中垂直居中

时间:2017-04-24 00:09:58      阅读:29      评论:0      收藏:0      [点我收藏+] 转载下别人收集的定位方法,写的比较详细,比如子元素定位要先考虑父元素的是行内元素还是块内元素,transform灵活运用等等. 水平居中 1) 若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中. 2) 若是块级元素, 该元素设置 margin:0 auto即可. 3) 若子元素包含 float:left 属性, 为了让子

水平居中+垂直居中

页面结构都是: <div class="parent" style="background-color:red;width: 400px;height: 400px;"> <div class="child" style="background-color:blue;width: 200px;height: 200px;"></div> </div> 一.水平居中 1.设置父元素

水平居中、垂直居中、水平垂直居中

参考:https://www.w3cplus.com/css/centering-css-complete-guide.html 一.水平居中 1.行内元素: text-align:center即可 2.块级元素[固定宽度]: (1).一个固定宽度的块级元素,使用margin:0 auto即可 css: .has_width_block { width: 200px; background: deeppink; margin: 0 auto; } html: <div class="has

&lt;转载&gt;使CSS文字图片div元素居中方法之水平居中的几个方法

文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决的时候相对来说通过css比较容易设置,垂直居中相对比较棘手. 先来说一下水平居中的不同情况与不同解决方法吧. 1文本,图片等行内元素的水平居中方法呢比较简单.直接给父元素设置一个text-align:centent属性就可以实现元素的水平居中了. 2 确定宽度的块级元素水平居中怎么设置呢?设置方法也

图片垂直水平居中

前端布局,垂直水平居中是经常遇到的一个场景.水平居中较为容易,垂直居中则需变通处理,特别是图片的居中. 行内元素居中, 包括文本,图片,表单元素等,display属性为inline的元素 水平居中原理: text-align:center 实现水平居中 垂直居中原理:利用 line-height 等于 height 块元素居中,display属性为block的元素 水平居中原理:利用 margin:0 auto 实现 垂直居中原理:利用 vertical-align 实现垂直居中,决定行高的是行

布局-水平垂直居中

结构: 1 <div class="parent"> 2 <div class="child">DEMO</div> 3 </div> 样式: 1.解决方案一:text-align + inline-block + table-cell + vertical-align(结合前面的水平居中+垂直居中) 1 .parent { 2 background-color: grey; 3 width: 300px; 4 hei

元素不定宽在页面上面,水平垂直居中

如果你曾经研究过图片水平垂直居中的方法,那么下面这几个方法你肯定知道 下面介绍的方法主要是利用display:inline-block;让元素变为行内块元素,利用vertical-align:middle来实现垂直居中,利用父元素的text-align:center;实现水平居中. 一.表格方法表格本来对立面的内容是垂直居中的,所以用表格来做很适合.但是它里面的内容是行内元素才行,所以下面的代码就可以实现.<style>*{margin:0px; padding:0px;}table {pos

hmtl div水平、垂直居中

最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单.水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法 下面说两种在屏幕正中(水平居中+垂直居中)的方法放上示范的html代码: <body>    <div class="main">        <h1>MAIN</h1>    </div></body> 方法一: div使用