转载自-CSS居中绝对https://www.cnblogs.com/skura23/p/6530556.html

作者:PajamaCat

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; /* 要设定宽度 */

}

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

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

    在网页布局中元素水平居中比元素垂直居中要简单不少,同时实现水平居中和垂直居中往往是最难的.现在是响应式设计的时代,我们很难确切的知道元素的准确高度和宽度,所以一些方案不大适用.据我所知, 在CSS中至 ...

  2. 网页元素居中的n种方法

    导语:元素居中对齐在很多场景看上去很和谐很漂亮.除此之外,对于前端开发面试者的基础也是很好的一个考察点.下面跟着作者的思路,一起来看下吧. 场景分析 一个元素,它有可能有背景,那我要它的背景居中对齐 ...

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

    table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...

  4. 【前端】使用CSS使元素居中的几种方式

    Precondition: <div class="parent"> <div class="item">居中</div> ...

  5. css一个元素垂直居中的6种方法

    方法一: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  6. 元素居中的两种方法，transform和margin

    1.transform :translate(-50%,-50%) <!DOCTYPE html> <html lang="en"> <head> ...

  7. css绝对定位元素实现居中的几个方法

    一:CSS绝对定位元素left设为50%实现水平居中 绝对定位的元素left设为50%时,是已左上角为原点的,所以只要再使用margin属性添加负值补偿回来即可.示例:[css]代码如下: #boar ...

  8. css如何实现垂直居中（5种方法）

    css如何实现垂直居中(5种方法) 一.总结 一句话总结:行内只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了. 块的话可以尝试 margin:auto: ...

  9. css实现垂直水平居中的5种方法

    css实现垂直水平居中的5种方法 给父元素设置table-cell,text-align,vertical-align #big{ width: 200px; height: 200px; borde ...

随机推荐

  1. Flink-Kafka-Connector Flink结合Kafka实战

    戳更多文章: 1-Flink入门 2-本地环境搭建&构建第一个Flink应用 3-DataSet API 4-DataSteam API 5-集群部署 6-分布式缓存 7-重启策略 8-Fli ...

  2. Spring Boot Web 开发注解篇

    本文提纲 1. spring-boot-starter-web 依赖概述 1.1 spring-boot-starter-web 职责 1.2 spring-boot-starter-web 依赖关系 ...

  3. SQL优化 MySQL版 - 多表优化及细节详讲

    多表优化及细节详讲 作者 : Stanley 罗昊 [转载请注明出处和署名,谢谢!] 注:本文章需要MySQL数据库优化基础或观看前几篇文章,传送门: B树索引详讲(初识SQL优化,认识索引):htt ...

  4. Springboot 系列（四）Spring Boot 日志框架

    注意:本 Spring Boot 系列文章基于 Spring Boot 版本 v2.1.1.RELEASE 进行学习分析,版本不同可能会有细微差别. 前言 Spring 框架选择使用了 JCL 作为默 ...

  5. AspNetCore+Swagger 生成Model 描述

    AspNetCore+Swagger 生成Model 描述 前言: 本篇文章实现是基于上一篇文章,进下补充:多余的就不多说了,只是为了实现Model的描述生成:有兴趣的可以结合上一篇的进行实现:如有更 ...

  6. 基于Windows服务的WCF

    (1)创建WCF 代码示例: [ServiceContract] public interface ILimsDBService { [OperationContract] int ExecuteSq ...

  7. pycharm中Django的安装和简单使用

    一.安装: 1.点击File,找到setting选项 2.点击+号,进入下面界面 结束后,安装完成 二.创建Django项目 创建成功后,新项目左侧: templates:用于存储HTML文件 set ...

  8. vue click事件 v-on:click

    v-on:click <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  9. JQuery拖拽元素改变大小尺寸

    <!DOCTYPE html><html> <head> <title></title> <style type="text ...

  10. findlibrary returned null

    转载请标明出处,维权必究:https://www.cnblogs.com/tangZH/p/10181330.html 该错误是在加载so库的时候出现的,就是找不到so库. 一.检查jinLibs目录 ...