css水平垂直居中

第一种方法:

   在父div里加:

      display: table-cell;
vertical-align: middle;
text-align: center;

   内部div设置: 

    display: inline-block;

   代码如下:

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css水平垂直居中</title>
<style>
body {
margin: 0;
} .center {
width: 250px;
height: 250px;
border: 2px solid red;
font-size: 18px; /* 方法1 */
display: table-cell;
vertical-align: middle;
text-align: center;
} .center_inner {
width: 100px;
height: 100px;
background-color: pink; /* 方法1 */
display: inline-block;
}
</style>
</head> <body>
<div class="center">
<div class="center_inner">面朝大海,春暖花开!</div>
<!-- <div class="center_inner center_last">海阔天空</div> -->
</div>
</body> </html>
  使父元素内的所有行内元素水平垂直居中(内部div设置display:inline-block即可)。

中间的粉色是居中的div

  

  若子元素是图像,可不使用table-cell,而是其父元素用行高替代高度,且字体大小设为0。子元素本身设置vertical-align:middle

<style>
.f12 .parent{
line-height: 200px;
text-align: center;
font-size:0;
}
.f12 .child{
vertical-align: middle;
}
</style>
<div class="case-box f12" data-case="f12">
<div class="parent" style=" width:200px;">
<img class="child" src="../../img/head.jpg" style="width:50px;" alt="test">
</div>
</div>

 展示效果为把div改为图片

第二种方法:

   在居中的div元素里加

   /* 第二种方法 */
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);

   代码如下:

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css水平垂直居中</title>
<style>
.center {
width: 100px;
height: 100px;
background-color: pink;
/* 第二种方法 */
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="center">海阔天空</div>
</body> </html>

    translate()函数可以在不知道宽高的情况下,利用它实现水平垂直居中。

    translate(-50%, -50%)作用是,往上(X轴),左(Y轴)移动自身长度的50%,以使其居于中心位置。

    如果使用top:50%, left:50%,是以左上角为原点,故不处于中心位置;但如果知道宽高,可以

            position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;

第三种方法:用弹性布局实现垂直左右居中

display:flex; 设置.wrap为弹性布局

justify-content:center;定义项目在主轴(水平方向)上居中对齐

align-items:center;定义项目在交叉轴(垂直方向)上居中对齐

  代码如下:

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css水平垂直居中</title>
<style>
* {
margin: 0;
padding: 0;
} .center {
width: 200px;
height: 200px;
border: 2px solid red;
margin:40px;
display: flex;
justify-content: center;
align-items: center;
} .inner {
width: 50px;
height: 50px;
background-color: pink;
}
</style>
</head> <body>
<div class="center">
<div class="inner">朝气蓬勃</div>
</div>
</body> </html>

  效果图:

  如果想让里面的文字也水平垂直居中,在粉红色背景的div加上下面的css属性

    display: flex;
align-items: center;
justify-content: center;

第四种方法:绝对定位

  在父div里加

position: relative;

  在子div里加

    position: absolute;
top:0;
left:0;
right: 0;
bottom: 0;
margin: auto;

  代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test</title>
    <style>
        #box {
            width: 250px;
            height: 250px;
            background-color: pink;
            position: relative;
        }
        .inner {
            width: 100px;
            height: 100px;
            background-color: red;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div id="box" title="风度翩翩">
        <div class="inner">胆识超群</div>
    </div>
</body>
</html>

  效果如下:

  

第五种方法:

  在父div里加:

    display:table-cell;
vertical-align: middle;

  在子div里加:

   display: table;
   margin: 0 auto;

  代码如下: 

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test</title>
<style>
#box {
width: 250px;
height: 250px;
background-color: blue;
display: table-cell;
vertical-align: middle;
} .inner {
width: 100px;
height: 100px;
background-color: red; display: table;
margin: 0 auto;
}
</style>
</head> <body>
<div id="box" title="风度翩翩">
<div class="inner">明眸皓齿</div>
</div>
</body> </html>

  效果如下:

  

第六种:flex

  在父元素里加

  display: flex;

  在子元素里加:

  margin:auto;

  代码如下: 

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test</title>
<style>
#box {
width: 250px;
height: 250px;
background-color: yellow;
display: flex;
} .inner {
width: 100px;
height: 100px;
background-color: red; margin: auto;
}
</style>
</head> <body>
<div id="box" title="豁达大度">
<div class="inner">才华横溢</div>
</div>
</body> </html>

  效果如下:

  

第七种方法:grid

  在父元素里加:

   display: grid;

  在子元素里加:

   align-self: center;
  justify-self: center;

  代码如下:

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test</title>
<style>
#box {
width: 250px;
height: 250px;
background-color: yellowgreen;
display: grid;
} .inner {
width: 100px;
height: 100px;
background-color: red; align-self: center;
justify-self: center;
}
</style>
</head> <body>
<div id="box" title="坚韧不拔">
<div class="inner">浑然天成</div>
</div>
</body> </html>

  效果如下:

  

  如有疑问请加群,讨论854184700

  

  

  

css3水平垂直居中(不知道宽高同样适用)的更多相关文章

  1. css3种不知道宽高的情况下水平垂直居中的方法

    第一种:display:table-cell 组合使用display:table-cell和vertical-align.text-align,使父元素内的所有行内元素水平垂直居中(内部div设置di ...

  2. css中:如何让一个图片(不知道宽高,宽高可能比父元素div大),在父元素div内部水平垂直居中,并且不溢出父元素div,且图片不拉伸变形(可等比例缩小)?

    欢迎进入:http://www.jscwwd.com/article/list/%E5%85%A8%E9%83%A8 效果图: 不管父元素的宽高怎么变化,图片都是水平垂直居中的,并且不溢出父元素. 注 ...

  3. [css3]水平垂直居中

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

  4. CSS3中flexbox如何实现水平垂直居中和三列等高布局

    最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.

  5. css3不定宽高水平垂直居中

    1 justify-content:center;//子元素水平居中 2 align-items:center;//子元素垂直居中 3 display:-webkit-flex; 在父级元素上面加上上 ...

  6. css 水平垂直居中显示(定高不定高定宽不定宽)

    position 元素已知宽度 <!DOCTYPE html><html lang="en"><head> <meta charset=& ...

  7. CSS Transform让百分比宽高布局元素水平垂直居中

    很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高是100px,那么就用margin-left:-50px;m ...

  8. CSS未知宽高元素水平垂直居中

    方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素(p ...

  9. 用CSS/CSS3 实现水平居中和垂直居中,水平垂直居中的方式

    一.水平居中 (1)行内元素解决方案:父为块元素+text-align: center 只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可: 使用te ...

随机推荐

  1. AOM

    AOM ----  Automation Object Model (自动化对象模型) AOM就是一个可以自动化QTP的自动化对象模型,它可以对QTP的进行自动化配置操作以及QTP的运行回放进行自动化 ...

  2. Codeforces 500C New Year Book Reading

    C. New Year Book Reading time limit per test 2 seconds memory limit per test 256 megabytes input sta ...

  3. Https socket 代理

    https直接与服务器通过ssLsocket连接可行 import java.io.InputStream;import java.io.OutputStream;import java.securi ...

  4. HTML页面仿iphone数字角标

    做仿iphone样式的数字角标,用简单的css来实现 <html><head><title>角标数字</title><style type=&qu ...

  5. casperjs-options

    The Casper class The easiest way to get a casper instance is to use the module's create() method: 最简 ...

  6. 数据库设计-Mysql数据库表设计的过程中几个关键点

    一.表设计过程中应该注意的数据类型 1)更小的通常更好 控制字节长度 2)使用合适的数据类型: 如tinyint只占8个位,char(1024)与varchar(1024)的对比,char用于类似定长 ...

  7. JavaScript — event介绍以及兼容处理

    JavaScript - event介绍以及兼容处理 1.事件流 浏览器发展到第四代时(IE4及 Netscape Communicator 4),浏览器开发团队遇到一个问题:页面的哪个部分会拥有某个 ...

  8. elasticsearch Mapping 定义索引

    Mapping is the process of defining how a document should be mapped to the Search Engine, including i ...

  9. Spring 2.5配置文件详解(转)

    http://book.51cto.com/art/201004/193743.htm 6.2.3  Spring 2.5配置文件详解 Spring配置文件是用于指导Spring工厂进行Bean生产. ...

  10. STM点滴一

    就就是你用BSRR和BRR去改变管脚状态的时候,没有被中断打断的风险.也就不需要关闭中断. This way, there is no risk that an IRQ occurs between ...