学习中的问题:04如何居中一个元素?

原创 2018年04月15日 19:26:44

在做页面布局的时候,经常会遇到使一个元素居中这种情况,今天系统的总结一下。

1.行内元素

水平居中

为其父元素设置属性text-align:center;

垂直居中

height和line-height的值相同,只写line-height也是可以的。

2.块级元素

水平居中

如果这个块级元素给了宽度,那么应用margin:0 auto;属性可以使其水平居中

如果没给这个块级元素宽宽度,请看下面:

<div class="father">
    <div class="son"></div>
</div>
.father{
	    width: 400px;
	    height: 300px;
	    position: relative;
	    background: yellow;
}
	    .son{
	    width: 100px;
	    height: 100px;
	    position: absolute;
	    background: blue;
	    left: 50%;
	    transform: translateX(-50%);
}

可以通过定位,向右移动父元素的50%,此时超过中线半个本身长度,所以使用translateX左移50%自身长度。

垂直居中

如果给了高度,可以通过计算,使margin的top和bottom的值相等。

也可以在设置定位后,将其top和bottom的值设置为同一值,然后设置margin:auto;也可以达到垂直居中的效果。


如果没给高度。

也可以通过向上面水平居中的方式,通过定位,向下移动父元素的50%,此时超过中线半个本身长度,所以使用translateY上移50%自身长度。







元素居中的几种方法

元素居中的几种方法
  • alitterboy
  • alitterboy
  • 2017-01-17 21:51:22
  • 585

Web前端面试指导(十四):如何居中一个元素(正常、绝对定位、浮动元素)?

题目点评 这道题目的提问比较多,连续问了三个问题,正常元素、绝对定位元素、互动元素如何居中,而且居中没有说清楚是垂直居中还是水平居中,要回答清楚这个问题,必须得有深厚的功底,而且要分类的来回答,条理要...
  • lxcao
  • lxcao
  • 2016-09-26 16:34:07
  • 6424

css使元素居中的九种办法

一、使用text-align: center;居中对于行内元素或具有inline-block属性的元素居中,比如span、img等可以使用text-align: center;来实现。/*css*/ ...
  • FrontEnder_way
  • FrontEnder_way
  • 2017-03-12 01:08:37
  • 1219

页面元素居中的几种方法

1前言 做页面布局时,经常会需要将一些页面元素居中显示。当然,你可以设定元素的top、left来使它居中,但是,当父容器的大小发生变化,你不得不修改子元素的top、left来使它保持居中;当用户的显示...
  • lk103852503
  • lk103852503
  • 2014-09-05 15:49:24
  • 2218

如何居中div?如何居中一个浮动元素?

给div设置一个宽度,然后设置元素的左右外边距为 auto,比如,margin:0px auto。则可以实现 div 居中显示。 对于浮动元素,设置其左右外边距为关键字 auto 是无效的。此时,如...
  • u012396955
  • u012396955
  • 2016-12-29 13:51:10
  • 2469

如何居中一个设置了浮动的元素

对于一个没有浮动的元素,我们通常可以通过对其设置margin:0 auto;来实现元素的居中,但是这个方法对于浮动元素却失去了作用,其实我们可以理解的是,在脱离文档流后,浮动的力量其实就是auto的力...
  • ziminghuohua
  • ziminghuohua
  • 2017-06-25 18:48:11
  • 704

position学习 一种让元素上下和左右居中的方式

一  position属性 1 absolute 绝对定位 相对于上一级的父元素进行定位,通过“top”,‘right’,‘bottom’,‘left’进行定位; 2 fixed 固定定位 相对于浏...
  • github_36496793
  • github_36496793
  • 2016-11-03 19:51:41
  • 1073

如何居中一个浮动元素

原文出处:http://blog.sina.com.cn/s/blog_8d322eff010192wx.html 回答:设置容器的浮动方式为相对定位 然后确定容器的宽高 比如宽500 高 300 的...
  • chelen_jak
  • chelen_jak
  • 2014-02-14 16:19:48
  • 12601

绝对定位让元素完全居中的两种方法

方法一:(不能微调) position:absolute; left:0; right:0; top:0; bottom:0; margin:auto;   方法二:(可微调) posit...
  • qq1014156094
  • qq1014156094
  • 2017-03-29 11:25:35
  • 4045

CSS设置行内元素和块级元素的水平居中、垂直居中

关于CSS的居中问题。
  • nian1272153207
  • nian1272153207
  • 2016-05-03 15:12:28
  • 6306
收藏助手
不良信息举报
您举报文章:学习中的问题:04如何居中一个元素?
举报原因:
原因补充:

(最多只允许输入30个字)