css重点8：水平居中、垂直居中、绝对定位的居中的问题

已于 2022-05-27 16:09:49 修改
阅读量250 收藏
点赞数
分类专栏： css 文章标签： css css3 前端
于 2020-05-02 11:13:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42129553/article/details/105888054
版权
css 专栏收录该内容
41 篇文章 3 订阅 ¥19.90 ¥99.00
订阅专栏

1、块级盒子的水平居中显示

margin: auto;

2、盒子中 文本水平居中

text-align: center

3、盒子中 文本垂直居中

行高等于高

line-height: height

4、vertical-align 垂直居中 （只对行内元素和行内块元素）

只对行内元素和行内块元素有效。如果想要块级盒子也能垂直居中显示，可以转为行内块元素

3、绝对定位时的居中显示

思想：因为是绝对定位，所以margin：auto对他们是没用的
所以绝对定位是有公式的：
left:50%;margin-left:-(文字的宽度一半)

<!DOCTYPE html>
<html lang&
了解本专栏 订阅专栏 解锁全文
小黄呀呀呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
923723914
09-11 4335
Ⅰ.绝对定位居中(Absolute Centering)技术 我们经常用margin:0 auto来实现水平居中，而一直认为margin:auto不能实现垂直居中……实际上，实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; botto...
CSS定位“十字架”之水平垂直居中
12-13
可以看到我的实现过程是先使用一个父级的div来定位水平垂直居中，然后再父级的div中定位出两个十字架的div。 看实现代码： XML/HTML Code复制内容到剪贴板 <html>  <head>  <title></...
CSS绝对定位之水平居中
zhenzuo_x的博客
09-02 872
   最近博主在做一份小作业，发现关于水平居中，本来div可以通过写  margin: 0px auto;   实现水平居中，但是当把div的位置绝对定位的时候，此种方法却无法实现。为此上网查询了一些方法，可通过 position: absolute; width: 400px; //div的宽度 left: 50%; margin-left: -200px; //div宽度的一半  ...
css水平垂直居中（绝对定位居中）
weixin_39037804的博客
09-16 280
使用绝对定位有个限制就是父集必须设置一个固定的高度。 首先HTML 1 <div id="box"> 2 <div class="child"></div> 3 </div> CSS 1...
【CSS】绝对定位元素的水平居中 和 垂直居中
weixin_30896763的博客
10-19 303
居谁的中呢，相对于谁绝对定位，就是居谁的中了。 若是水平居中的话，将该绝对定位的元素添加这个样式： left: 0; right: 0; margin-left: auto; margin-right: auto; demo： <!DOCTYPE html> <html lang="en"> <head...
CSS-----绝对定位盒子水平居中
wode39的博客
08-08 1234
正确做法：子盒子通过left属性向右移动父盒子宽度的50%，再通过margin-left负值向左移动自身宽度的50%；垂直居中同理可得：通过top属性向下移动父盒子高度的一半，再通过margin-top负值向上移动自身个高度的一半。在CSS中绝对定位的盒子无法通过margin：0 auto;.........
CSS 将两个button按钮垂直+水平居中
01-20
在这个问题中，我们将讨论如何使用CSS将两个button按钮实现垂直和水平居中的方法，主要聚焦于一种使用`position: absolute`和`margin: auto`的技术。这种方法适用于知道元素宽度和高度的情况。 首先，我们需要创建...
css 水平居中，垂直居中，自适应宽度的代码
12-13
一、宽度自适应的元素水平居中： 　1.宽度自适应的元素可以是：绝对位定、浮动元素、行内元素。而我们通常布局，肯定不会用行内元素，所以会选择，绝对定位或浮动。 2.居中：这里我们应该会想到1/2、50%、一半等...
CSS水平垂直居中解决方案(6种)
09-24
在CSS布局设计中，水平垂直居中是一种常见的需求，它能确保元素在容器内始终保持中心对齐，无论容器尺寸如何变化。以下将详细介绍六种不同的CSS水平垂直居中解决方案： 1. **绝对定位+margin负值法** 当你知道元素...
css常用元素水平垂直居中方案
01-19
flex实现水平垂直居中 适用场景：父子宽高都可未知(比较推荐这种方式，简单，而且目前兼容性也不错。) <html> <head> <style> .parent { width: 100%; height: 100px; background: cyan; ...
css 通过绝对定位实现水平垂直居中
haoyanyu_的博客
09-12 262
知识点： margin: auto; 效果图： 代码：     html: &lt;div class="outer"&gt; &lt;div class="inner"&gt;&lt;/div&gt; &lt;/div&gt;   css: .outer { width: 100vw; height: 100vh; position: rela...
css3绝对定位垂直居中,CSS经典面试题-水平垂直居中之绝对定位方法
weixin_31292909的博客
08-03 347
前言对于使用CSS属性使得元素水平垂直居中问题，基本是在前台面试问题中必问的一个问题。因为这个问题的答复要分好几种情况，我也会写几篇文章分别讲述。今天这篇文章我们首先看看，只有一个元素的时候采用绝对定位如何实现水平垂直居中的。我已经将代码放到github上，感兴趣的同学可以去看看。https://github.com/zhouxiongking/article-pages/blob/master/...
CSS实现水平垂直居中
caigouyimei的博客
03-07 78
1.使用绝对定位实现水平垂直居中 .center-vertical{ width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; margin-top: -50%; /*高度的一半*/ margin-left: -50%; /*宽度的一半*/ } 优点：兼容性好 缺点：需要提前知道元素的尺寸。如果不知道元素尺寸，就需要JS获取 2.使用transform代替margin .center-vertical{
用位移实现盒子垂直水平居中
weixin_58414196的博客
03-07 258
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&lt
css实用技巧——绝对定位元素的水平垂直居中
朝阳39的博客
04-14 1089
方法一 原理：将left right top bottom都设置为0，使绝对定位相对整个页面定位，同时margin为auto，完成上下左右外边距等分，最终实现绝对定位元素的水平垂直居中 <template> <div class="box center"> </div> </template> <style scoped> .box { width: 100px; height: ..
css3 让绝对定位元素水平居中的方法
森森
06-30 7896
一、绝对定位元素的居中实现 如果要问如何CSS实现绝对定位元素的居中效果，很多人心里已经有答案了。 兼容性不错的主流用法是： 1 2 3 4 5 6 .element {     width: 600px; height: 400px;     position: absolute;
【CSS 布局】水平垂直居中
我有满天星辰的博客
02-09 1738
创建一个父盒子，和子盒子
css中让绝对定位的盒子水平或者垂直居中！！
fighting_dream的博客
01-29 439
这是一个标准流盒子，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>实现绝对定位的盒子水平居中</title> <style>
CSS水平垂直居中的方式
weixin_45392559的博客
03-02 113
使用flex布局 HTML <div class="box"> <div class="child"></div> </div> CSS .box { width: 100vw; height: 500px; background: skyblue; display: flex; align-items: center; justify-content: center; } .child { width: 20
css绝对定位水平垂直居中
最新发布
10-13
要使一个元素在父元素中水平垂直居中，可以使用以下 CSS 代码： ```css .parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小黄呀呀呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值