CSS绝对定位元素居中的几种方法

CSS居中绝对定位元素的方法,有很多种,下面是我收集的几种

1,div宽度未知1

<body>
  <div style="position: absolute; left: 50%;">
    <div style="position: relative; left: -50%; border: dotted red 1px;">
      没有宽度<br />
      照样居中,嘿嘿嘿
    </div>
  </div>
</body>

demo:https://jsfiddle.net/skura23/0123wmsg/

2,div宽度未知2

<div class="outer">
    <div class="inner">居中<br/>蓄力中</div>
</div>

.outer {
    position: relative; /* or absolute */

    /* unnecessary styling properties */
    margin: 5%;
    width: 80%;
    height: 500px;
    border: 1px solid red;
}

.inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    /* unnecessary styling properties */
    max-width: 50%;
    text-align: center;
    border: 1px solid blue;
}

demo:http://jsfiddle.net/skura23/6xo11zwv/210/

ps:此方法适合ie8以上的浏览器

3,div宽度已知

<body>
  <div>
    <div id="content">
      居中蓄力中
    </div>
  </div>
</body>

#content {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 100px; /* 要设定宽度 */
}

demo:https://jsfiddle.net/skura23/rk3qfvv2/1/

--------------------------------------------------

后面有其他的方法的话,会继续添加

时间: 2024-11-03 05:36:43

CSS绝对定位元素居中的几种方法的相关文章

使用CSS完成元素居中的七种方法

在网页布局中元素水平居中比元素垂直居中要简单不少,同时实现水平居中和垂直居中往往是最难的.现在是响应式设计的时代,我们很难确切的知道元素的准确高度和宽度,所以一些方案不大适用.据我所知, 在CSS中至少有六种实现居中的方法.我将使用下面的HTML结构从简单到复杂开始讲解: <div class="center">  <img src="jimmy-choo-shoe.jpg" alt></div> 鞋子图片会改变,但是他们都会保持

css中元素居中的几种方法

对于在网页端布局,垂直居中难于水平居中,同时实现水平和垂直居中是最难的.在移动端,因为设备的宽高是可变的,故一些方案很难实现.以下使用几种方案对下面的html去实现居中,如有不足,可以提出宝贵的意见: <div class="center"> <img src="1.jpg" alt> </div> 1. 使用text-align水平居中 这种方案只能使水平居中,要想垂直居中的话,要给div添加padding或给内容添加margi

元素居中的几种方法

元素居中的几种方法: ① 块级元素margin:0 auto; 针对嵌套的盒子元素,子元素在父元素中居中,只在水平方向上有效,浮动流排版中不可用 ② 内联元素text-align:center; 对块级元素设置此属性,使得盒子内的内联元素居中,一般包括文字/图片等 ③ 背景background-position:center top; 主要实现背景图片的居中 ④ 文字行内垂直居中 一行文字垂直居中:文字行高line-height的值与盒子的高度一致 多行文字垂直居中:文字内边距设置padding

div等块级元素居中的两种方法

以下两种方法是针对宽度确定的块级元素而言的 1.设置块级元素CSS属性为: margin: 0 auto: 即左右margin设置为auto. 2.设置块级元素的display为inline(此时要求块级元素包含内容,否则由于内联元素的高度设置不起作用,相当于高度为零,块级元素就无法被看到)或者inline-block. 该块状元素的父级元素CSS设置: text-align:center; 此时会将该块状元素看作text进行居中处理.

页面元素居中的几种方法

1前言 做页面布局时,经常会需要将一些页面元素居中显示.当然,你可以设定元素的top.left来使它居中,但是,当父容器的大小发生变化,你不得不修改子元素的top.left来使它保持居中:当用户的显示器分辨率与你的测试机不同,可能会导致界面乱成一片,所以不管从代码的易维护性的角度还是从对不同分辨率显示器的适应性方面来说,这种设置固定值的方法显然是比较拙劣的.因此,做页面布局,应尽量减少使用固定值的布局方式.下面介绍几种页元素居中的方法. 1Div居中 1.1左右居中 在父窗口中设置text-al

css中元素水平垂直居中4种方法介绍

table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对block元素不起作用,但对table-cell元素是有效的)设置元素垂直居中,即可达到我们想要的效果. IE7及以下版本不支持此方法,IE8及以上版本及大部分的主流浏览器都很好的支持. HTML代码  代码如下   <div class="img">    <img src=

元素居中的三种方法(包括垂直居中和水平居中)

第一种方案:分别设置垂直居中和水平居中 第二种方案:未知居中元素的尺寸的居中方案 第三种方案:已知所要居中元素尺寸的居中方案 当然图片的居中也差不多 1 <html> 2 <head> 3 <style> 4 .box2,.box3{ 5 float: left; 6 } 7 .box { 8 /*非IE的主流浏览器识别的垂直居中的方法*/ 9 display: table-cell; 10 vertical-align:middle; 11 /*设置水平居中*/ 12

css控制元素垂直居中的几种方法

一.单行文本垂直居中 HTML: <div id="parent"> <div id="child">Content here</div> </div> CSS: #child { line-height: 200px; } 二.垂直居中一张图片 HTML <div id="parent"> <img src="image.png" alt="&quo

使定位元素居中的4种方法例举

例子: 创建两个div,定位父级'box'  和   定位元素'sun'.本文要做的是 'sun' 要在 'box' 中居中显示, 该怎么做呢? 定位前效果图: 定位元素居中后的效果图: HTML代码: <!--定位元素父级--> <div id="box"> <!--定位元素--> <div id="sun"></div> </div> 样式代码: <style type="t