CSS实现: 水平居中 的几种方法

这篇具有很好参考价值的文章主要介绍了CSS实现: 水平居中 的几种方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

实现方法:

1、添加 margin 值 auto
2、定位 position(子绝父相) + 偏移值 left + margin-left 回退 [ 需要计算,有点 麻烦 ]
3、定位 position(子绝父相) + 偏移值 left + CSS-2d transform
4、文字居中 text-align:center; + 行内块元素
5、弹性盒子布局 [ 推荐 ]

示例

代码实现:

<div class="box">
	<div class="box1"></div>
</div>
.box{
	width: 500px;
	height: 300px;
	background-color: aquamarine;
}
.box1{
	width: 200px;
	height: 100px;
	background-color: lightpink;
}

原始效果图:

CSS实现: 水平居中 的几种方法

接下来,将使用这个例子来测试上面提到的几种实现水平居中的方法以及记录解决测试过程中出现的一些小问题

  • 添加margin值(外边距):margin:auto;
    .box1{
     	width: 200px;
     	height: 100px;
     	background-color: lightpink;
     	margin: auto;
    }
    

    效果图:水平居中成功实现

    CSS实现: 水平居中 的几种方法
    拓展注意点:

           如果需要小盒子上下也有一定边距,可以修改margin设置:margin:100px auto;

    效果图:

    CSS实现: 水平居中 的几种方法

    从上面效果图可以发现:两个盒子同时向下移动

    这种情况的出现是由 margin塌陷 导致的

    那么,该如何解决这种问题呢?

    这里,可以将父元素box变为BFC:overflow: hidden; [ 注意不是超出隐藏的作用 ]

    效果图:

    CSS实现: 水平居中 的几种方法

    到这里,盒子们都走上了正轨,margin塌陷的问题完美解决 ~

  • 定位 position + 偏移值 left + margin-left 回退
    .box{
     		width: 500px;
     		height: 300px;
     		background-color: aquamarine;
     		position: relative;
    }
    .box1{
     		width: 200px;
     		height: 100px;
     		background-color: lightpink;
     		position: absolute;
     		/* 相对父级宽度50% */
     		left: 50%;
     		margin-left: -100px;
    }
    

    注意点:

    只设置left: 50%;并不能实现水平居中的效果:

    CSS实现: 水平居中 的几种方法
    如果想让小盒子水平居中 ,需要向左移动半个小盒子的宽度距离:margin-left: -100px;

    效果图:

    CSS实现: 水平居中 的几种方法

  • 定位 position + 偏移值 left + CSS-2d transform
    .box{
     	width: 500px;
     	height: 300px;
     	background-color: aquamarine;
     	position: relative;
    }
    .box1{
     	width: 200px;
     	height: 100px;
     	background-color: lightpink;
     	position: absolute;
     	left: 50%;
     	transform: translateX(-50%);
    }
    

    注意点:

    left: 50%;transform: translateX(-50%); 中的 50% 代表的意义不一样:
    left: 50%; :相对于父元素box的宽度
    transform: translateX(-50%); :相对于自己box1的宽度

    效果图:

    CSS实现: 水平居中 的几种方法

  • 文字居中:text-align:center; + 行内块元素

    .box{
     	width: 500px;
     	height: 300px;
     	background-color: aquamarine;
     	text-align: center;
    }
    .box1{
     	width: 200px;
     	height: 100px;
     	background-color: lightpink;
     	display: inline-block;
    }
    

    注意点:

    如果仅使用 text-align:center;无法达到水平居中的效果的,为什么?

    text-align:center; 需要在行内块元素上使用的,而盒子是块级元素,所以,需要将盒子转换为行内块元素 text-align:center; 才能生效。

    效果图:

    CSS实现: 水平居中 的几种方法

  • 弹性布局: display:flex; [推荐]
    .box{
     	width: 500px;
     	height: 300px;
     	background-color: aquamarine;
     	display: flex;
     	/*主轴-x轴:居中*/
     	justify-content: center;
    }
    .box1{
     	width: 200px;
     	height: 100px;
     	background-color: lightpink;
    }
    

    效果图:

    CSS实现: 水平居中 的几种方法文章来源地址https://www.toymoban.com/news/detail-437745.html

到了这里,关于CSS实现: 水平居中 的几种方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CSS实现元素水平垂直居中的各种方法

    关于 CSS 如何将元素进行水平垂直居中的几种常用方法 前言         在设计网页页面的过程中,总会有将元素或者文字进行水平或者垂直居中的要求,各种CSS样式调整,搞的头都大了。这里将会介绍 CSS 中几种常用到的水平垂直居中的方法,希望能够对你有所帮助。 接下

    2024年02月08日
    浏览(34)
  • css 实现 html 元素内文字水平垂直居中的N种方法

            上一篇博文写了div 中元素居中的N种常用方法,那么单个html元素:div(块级元素代表),span(行内元素代表)中的文字如何水平垂直都居中呢?实现方法如下:         本文例子使用的 html body结构下的模型如下:         例子居中效果都如下图: 注:当把div

    2024年02月13日
    浏览(37)
  • CSS元素水平垂直居中的方法

    父级设置为 相对定位 ,子级 绝对定位 ,并且四个定位属性的值都设置了 0 ,那么这时候 如果子级没有设置宽高,则会被拉开到和父级一样宽高 这里子元素 设置了宽高 ,所以宽高会按照我们的设置来显示,但是实际上 子级的虚拟占位已经撑满了整个父级 ,这时候再给它一

    2023年04月09日
    浏览(31)
  • 【前端】CSS水平居中的6种方法

    后文:【前端】CSS垂直居中的7种方法_karshey的博客-CSDN博客 左右两边间隔相等的居中 display: flex; justify-content: center; 居中子元素 子绝父相,子元素 margin:auto 原理: top + margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom + bottom = height 上述式子中

    2024年02月12日
    浏览(28)
  • css实现水平居中

    代码示例 display:flex;  这些要添加在父级的,是父级的属性  //父级添加display:flex;  //父级添加justify-content:center; 效果图:  外边距可以让块级盒子水平居中,但是必须满足两个条件: ①盒子必须指定了宽度 ②盒子左右的外边距都设置为auto  .header{       width:960px;       m

    2024年02月14日
    浏览(29)
  • CSS图片水平垂直居中的三种方法

    我们知道img元素为行内快元素,所以首先设置图片元素的父元素里文字水平居中,行高与整体高度一致。 其次最重要的是设置图片元素的vertical-align属性为middle,该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐方式。 代码示例: 具体方式是先使用定位让图

    2024年02月13日
    浏览(39)
  • CSS实现图片放大缩小的几种方法

    参考 常用使用img标签,制定width或者height的任意一个,图片会自动等比例缩小 但是不知道为什么我在uniapp小程序中这样写并没有等比缩小 使用CSS3新属性,transform的scale 大于1: 放大 小于1: 缩小 使用背景图设置图片 https://www.runoob.com/cssref/css3-pr-background.html

    2024年01月19日
    浏览(57)
  • css实现三角形的几种方法

    css实现三角形的方法:1、使用边框实现三角形,利用透明边框和实色边框的组合,可以创建不同方向和大小的三角形;2、使用伪元素实现三角形,通过使用伪元素来创建一个占据父元素一半大小的实心三角形;3、使用transform属性实现三角形,通过调整旋转角度可以创建不同

    2024年02月12日
    浏览(29)
  • css-4:元素水平垂直居中的方法有哪些?如果元素不定宽高呢?

    1、背景 在开发中,经常遇到这个问题,即让某个元素的内容在水平和垂直方向上都居中,内容不仅限于文字,可能是图片或其他元素。 居中是一个非常基础但又是非常重要的应用场景,实现居中的方法存在很多,可以将这些方法分成两个大类。 居中元素(子元素)的宽高已

    2024年02月14日
    浏览(28)
  • 【css面试题】 实现一个盒子的水平竖直居中对齐效果

    面试题里有时还会强调 子盒子宽高是否已知,要注意一下 失败,只能水平居中,垂直不可以!!!!!!! 原因 http://t.csdn.cn/AOMJ1 http://t.csdn.cn/cFsg6 margin:auto是具有强烈计算意味的,用来计算元素对应方向上应该获得的 剩余空间 大小。 行内元素margin:auto; 不能水平居

    2024年02月09日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包