CSS 实现水平、垂直居中布局代码大全

CSS实现水平居中

  • 若是行内元素,则直接给其父元素设置text-align: center即可
  • 若是块级元素,则直接给该元素设置margin: 0 auto即可
  • 若子元素包含浮动元素,则给父元素设置width:fit-content并且配合margin
.parent {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
}
  • 使用flex布局的方式,可以轻松实现水平居中,即使子元素中存在浮动元素也同样适用
// flex 2012年版本写法
.parent {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
  • 使用绝对定位的方式,再配合CSS3新增的transform属性
.child {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}
  • 使用绝对定位的方式,再配合负值的margin-left(此方法需要固定宽度)
.child {
    position: absolute;
    left: 50%;
    width: 200px; // 假定宽度为200px
    margin-left: -100px; // 负值的绝对值为宽度的一半
}
  • 使用绝对定位的方式,再配合left:0;right:0;margin:0 auto;(此方法需要固定宽度)
.child {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 200px; // 假定宽度为200px
}

CSS实现垂直居中

  • 若元素是单行文本,则直接给该元素设置line-height等于其父元素的高度
  • 若元素是行内块级元素,可以配合使用display:inline-block;vertical-align:middle和一个伪元素来让内容块居中
.parent::after, .child {
    display: inline-block;
    vertical-align: middle;
}

.parent::after {
    content: "";
    height: 100%;
}
  • 使用vertical-align属性并且配合使用display:tabledisplay:table-cell来让内容块居中
.parent {
    display: table;
}

.child {
    display: table-cell;
    vertical-align: middle;
}
  • 使用flex布局的方式,可以轻松实现垂直居中,即使子元素中存在浮动元素也同样适用
.parent {
    display: flex;
    align-items: center;
}
  • 使用绝对定位的方式,再配合CSS3新增的transform属性
.child {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}
  • 使用绝对定位的方式,再配合负值的margin-top(此方法需要固定高度)
.child {
    position: absolute;
    top: 50%;
    height: 200px; // 假定高度为200px
    margin-top: -100px; // 负值的绝对值为高度的一半
}
  • 使用绝对定位的方式,再配合top:0;bottom:0;margin:auto 0;(此方法需要固定高度)
.child {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: 200px; // 假定高度为200px
}

CSS实现水平垂直居中

  • 使用flex布局的方式同样可以轻松实现水平垂直居中
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}
  • 使用绝对定位的方式,再配合CSS3新增的transform属性
.child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
  • 使用绝对定位的方式,再配合使用负值的margin-top和负值的margin-left(此方法需要同时固定宽度和高度)
.child {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -50px; // 负值的绝对值为高度的一半
    margin-left: -100px; // 负值的绝对值为宽度的一半
    width: 200px; // 假定宽度为200px
    height: 100px; // 假定高度为100px
}

 

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/4449.html

(0)
江山如画的头像江山如画管理团队
上一篇 2019年11月26日 下午7:53
下一篇 2019年11月27日 上午8:01

99%的人还看了以下文章

  • 如何制作图片按钮,并为图片按钮添加提交表单和重置表单功能

    网页中有表单,表单的默认按钮样式不是很好看,很多人为了美观使用图片做按钮。 今天中国网页设计给大家分享在网页制作中怎么制作图片按钮,并为图片按钮添加提交表单和重置表单功能。 一、图片按钮的制作方法 1、<input type=”image” /> 定义图像形式的提交按钮。 <input type=”image” sr…

    2018年9月30日
    5.6K0
  • 如何在网页中输入多个连续的空格?

    默认状态下(输入法为半角状态),按空格键只能输入一个空格,要在文本之间插入多个连续的空格,可以使用以下几种方法: 1) 使用Ctrl+Shift+Space组合键。 2) 在中文全角状态下,使用空格键。 3) 选择【插入】→【HTML】→【特殊字符】命令下的“不换行空格”命令。 4) 直接在代码视图输入“&nbsp;”字符。

    2020年4月3日
    14.7K0
  • 如何单独设置打印网页的样式

    做项目,有些网页需要打印,很多时候,是导出WORD或EXCEL再打印。 现在需要页面直接打印,方便没有安装OFFICE的用户。 需求:页面在浏览器中浏览是一种样式,要打印这个页面,是另一种样式。 解决方法:用link标签中的media属性解决此问题。 <link href=”stylesheets/print.css” media=”print” re…

    2019年2月15日
    2.0K0
  • Less编写及使用快速入门

    前面我们学习了《4个案例入门,学会LESS使用》,今天一起来学习如何编写,编译并使用LESS LESS的编写 LESS的使用是很容易的,使用你最常使用的代码编辑器,按LESSCSS的语法规则写好.less文件,接下来,使用编译工具它编译成.css,最后再引入页面即可。 LESS的编译 GUI编译工具 为方便起见,建议初学者使用GUI编译工具来编译.less文…

    2019年7月17日
    3.7K0
  • CSS3:Box-shadow 教程及实例-制作逼真的图片阴影效果

    box-shadow属性的基本用法 使用Box-shadow制作逼真的图片阴影效果 使用伪元素::before和::after,我们能实现非常逼真的只有图片才能实现的阴影效果。 HTML: <div class=”box11 shadow”></div> CSS: .box11 { width: 300px; height: 100p…

    2019年1月5日 网页制作
    4.9K0
  • css布局基础:浮动和清除浮动练习2

    主要知识点: 1、浮动:让元素脱离标准流,从而实现灵活的布局效果。 2、浮动只能左右,不能上下。float:left/right/none。 3、子元素浮动会造成父元素高度塌陷,清除浮动的3种方法: 方法1:通过overflow属性 方法2:通过clear属性 方法3:通过伪元素选择器(推荐) 效果图: 参考: <header> <img …

    2020年4月4日
    2.6K0

发表回复

登录后才能评论