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

参考: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_width_block">
  我是有宽度的块级元素
</div>

    (2).多个固定宽度的块级元素

      (a).将子元素设置为inline-block,再用text-align:center即可

css:

.container {
  background: yellowgreen;
  width: 1024px;
  height: 200px;
  text-align: center;
}

.has_width_block {
  width: 250px;
  background: deeppink;
  display: inline-block;
}

html:

<div class="container">
  <div class="has_width_block">
    我是有宽度的inline-block元素1
  </div>
  <div class="has_width_block">
    我是有宽度的inline-block元素2
  </div>
  <div class="has_width_block">
    我是有宽度的inline-block元素3
  </div>
</div>

      (b).使用flex,设置justify-content:center即可

css:

.container {
  background: yellowgreen;
  width: 1024px;
  height: 200px;
  display: flex;
  justify-content: center;
}

.item {
  width: 250px;
  height: 50px;
  background: deeppink;
}

html:

<div class="container">
  <div class="item">
    我是有宽度和高度的元素1
  </div>
  <div class="item">
    我是有宽度和高度的元素2
  </div>
  <div class="item">
    我是有宽度和高度的元素3
  </div>
</div>

  3.块级元素【不定宽度】:

    (1).单个不定宽元素。将元素设置为inline-block,再设置text-align:center即可

css:

.container {
  text-align: center;
}

.thumbnail {
  border: 1px solid #000;
  display: inline-block;
  padding: 5px;
}

html:

<div class="container">
  <div class="thumbnail">
    <img src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_efde696.png"
    />
    <p>描述</p>
  </div>
</div>

    (2).多个不定宽的元素。使用float:left,配合position:relative+left:50%或right:50%完成居中效果

css:

.pagination {
  width: 100%;
  overflow: hidden;
}

.pagination>ul {
  float: left;
  position: relative;
  left: 50%;
}

.pagination>ul>li {
  float: left;
  margin: 0 2px;
  padding: 3px 5px;
  background: yellowgreen;
  position: relative;
  right: 50%;
}

html:

<div class="pagination">
  <ul>
    <li>上一页</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>下一页</li>
  </ul>
</div>

实现思路如下:

参考http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

  • 没有浮动的div,其宽度为父元素的100%:

  • 向左浮动的div,其宽度为内容的大小。这是实现居中的关键点。

  • 把ul和li都调整成了向左浮动,那么li的宽度就是内容的宽度,ul的宽度是li宽度的总和

  • 将ul设置为position:relative,left:50%。至此,ul元素会相对于外层元素(蓝色边框的“centeredmenu div”)向右偏移50%的宽度

  • 最后一步,将li元素设置为position:relative,right:50%。至此,每一个li元素都会相对于ul元素向左偏移50%的宽度。最终达到水平居中的效果

二.垂直居中

  1.行内元素:

    line-height和height一致即可

  2.块级元素:

    (1).固定高度

      (a).要求元素有固定的高度。

      (b).设置父元素position:relative

      (c).设置元素position:absolute、top:50%、margin-top:-height/2。实现思路是先绝对定位元素,然后top:50%将元素的起始点拉到父元素的中心点,最后利用负边距,将元素垂直居中。

css:

.container {
  position: relative;
  width: 100%;
  height: 500px;
  background: gray;
}

.item {
  height: 50px;
  position: absolute;
  top: 50%;
  margin-top: -25px;
  background: deeppink;
}

html:

<div class="container">
  <div class="item">
    固定高度的元素
  </div>
</div>

    (2).不定高度

      (a).设置父元素display:table

      (b).设置元素display:table-cell、vertical-align:middle

css:

.container {
  display: table;
  width: 100%;
  height: 500px;
  background: gray;
}

.item {
  display: table-cell;
  vertical-align: middle;
  background: deeppink;
}

html:

<div class="container">
  <div class="item">
    <img src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_efde696.png"
      alt="">
  </div>
</div>

    (3).flex

      (a).align-item:center

css:

.container {
  display:flex;
  align-items: center;
  width: 100%;
  height: 500px;
  background: gray;
}

.item {
  background: deeppink;
}

html:

<div class="container">
  <div class="item">
    <img src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_efde696.png"
      alt="">
  </div>
</div>

三.水平居中+垂直居中

  1.宽高固定或不固定都可

    (1).flex

      (a).align-items:center

      (b).justify-content:center

css:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 500px;
  background: gray;
}

.item {
  background: deeppink;
}

html:

<div class="container">
  <div class="item">
    <img src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_efde696.png"
      alt="">
  </div>
</div>

  2.宽高固定

参考http://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%e7%bb%9d%e5%af%b9%e5%ae%9a%e4%bd%8d-%e6%b0%b4%e5%b9%b3%e5%9e%82%e7%9b%b4%e5%b1%85%e4%b8%ad/

    (1).margin:auto

      (a).position:absolute

      (b).top、right、bottom、left设置为0

      (c).margin:auto

css:

.container {
  position: relative;
  width: 100%;
  height: 500px;
  background: gray;
}

.item {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 100px;
  margin:auto;
  background: deeppink;
}

html:

<div class="container">
  <div class="item">
    width:100px
    <br>
    height:100px;
  </div>
</div>

    (2).position+负边距

css:

.container {
  width: 100%;
  height: 500px;
  position: relative;
  background: gray;
}

.item {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
  background: deeppink;
}

html:

<div class="container">
  <div class="item">
    width:100px
    <br> height:100px;
  </div>
</div>

  3.宽高不定

css:

.container {
  width: 100%;
  height: 500px;
  display: table;
  text-align: center;
  background: gray;
}

.item {
  display: table-cell;
  vertical-align: middle;
  background-clip: content-box;
  background: deeppink;
}

html:

<div class="container">
  <div class="item">
    宽高不定元素
    <br> 宽高不定元素
    <br> 宽高不定元素
    <br> 宽高不定元素
    <br>
  </div>
</div>
时间: 2024-10-10 02:36:48

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

解读CSS布局之-水平垂直居中

原文链接:http://f2e.souche.com/blog/jie-du-cssbu-ju-zhi-shui-ping-chui-zhi-ju-zhong/ 对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方法,是没有去考虑IE的,如果有兼容需要,可以参见这篇文章:http://www.cnblogs.com/Dudy/p/4085292.ht

转载:解读CSS布局之-水平垂直居中(1)

本文转自http://f2e.souche.com/blog/jie-du-cssbu-ju-zhi-shui-ping-chui-zhi-ju-zhong/,以及大地dudy的博客http://www.cnblogs.com/Dudy/p/4085292.html. 对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方法,是没有去考虑IE的,如果有

水平居中,垂直居中,水平垂直居中 方法大全

废话不多说, 直接上菜. 菜系:水平居中 菜名一: 行内(块)元素水平居中 1. 通过 text-align: center 可以实现在块级元素内部的行内元素水平居中. 2. 如果块级元素内部包着也是一个块级元素,我们可以先将其由块级元素改变为行内块元素(inline-block.inline-table.inline-flex.inline-grid),再通过设置行内块元素居中以达到水平居中. 菜名二: 块级元素水平居中 1. 将该块级元素左右外边距margin-left和margin-rig

CSS制作水平垂直居中对齐 多种方式各有千秋

作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收 集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀,要正确的选择也是一件不容易的事情.我会将这几种方法一一介绍给大家,以供大家参考.或许对 于我这样的初学者有一定的帮助. 用CSS来实现元素的垂直居中效果是件苦差事,虽然说实现方法有多种,但有很多方式在某些浏览器下可能无法正常的工作.接下来我们就一起来看看这些不同方法实现垂直居中的各自优点和其不足

css定位练习“十字架“之水平垂直居中

1.先看要实现的效果 实际的效果图 可以看到我的实现过程是先使用一个父级的div来定位水平垂直居中,然后再父级的div中定位出两个十字架的div. 看实现代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></t

css实现水平 垂直居中

css实现水平居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平居中</title> <style> .box1{ border: 1px solid #000; text-align: center; } .box2{ display: inline-block; backgroun

水平垂直居中div(css3)

一.在需要居中的元素加上如下C3属性即可: <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, min

《转》CSS元素水平垂直居中方法总结(主要对大漠以及张鑫旭博客所述方法进行了归纳)

转自大地Dudy的CSS元素水平垂直居中方法总结(主要对大漠以及张鑫旭博客所述方法进行了归纳) 本文主要是对主流居中方法进行了归纳,有些地方甚至就是把别人的代码直接复制过来的,没有什么自己的东西,除了大漠以及张鑫旭的方法外,还有来自司徒正美.怿飞博客的几个方法 以下方法,由于测试环境的原因,IE系列只测试了IE9和IE6,以下所说的IE的支持性只是相对于IE9和IE6来说的: 一.元素的水平垂直居中: 第一种方法: <!doctype html> <html lang="en&

css 实现元素水平垂直居中总结5中方法

个人总结,如有错误请指出,有好的建议请留言.o(^▽^)o 一.margin:0 auto:text-align:center:line-height方法 1 <div id="divAuto">margin,text-align;水平居中</div> 1 /* 2 margin:0 auto; 设置块元素(或与之类似的元素)的水平居中 3 text-align:center;设置文本或img标签等一些内联对象(或与之类似的元素)的水平居中 4 line-hei

常见的几种 CSS 水平垂直居中解决办法

用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:auto 之类的即可. 主要麻烦的地方还是在垂直居中的处理上,所以接下来主要考虑垂直方向上的居中实现. 水平垂直居中主要包括三类:基本文本类,图像类,其他元素类 但,也是由一些方法可以实现的,下面就来谈谈了解到的10中方法. 方法一.使用 line-height 这种方式更多地用在 单行文字的情况,其中使用overflow:hidden的设置是