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. 按回车键切换input鼠标光标

    function focue(){ if(event.keyCode==13){//回车键的键值13 event.keyCode=9;//tab键的键值9 } }

  2. CodeForce-1196D1-RGB Substring (easy version)

    原题链接 题目大意: 给出一串由'R', 'G', 'B'组成的长度为n的字符串,在里面选出一个长度为k的子串,要求在改变最少字符的情况下同时也是"RGBRGBRGB…"的子串. ...

  3. nginx 日志统计接口每个小时访问量

    指定时间段增量统计nginx日志不同接口的访问量: #!/bin/bash#此脚本用于统计nginx日志当前时间15分钟之内不同接口(URL)的访问量统计LOG=/usr/local/nginx/lo ...

  4. json模块 pickle 模块 collections 模块 openpyxl 模块

    json模块 json 模块是一个系列化模块 一个第三方的特殊数据格式 可以将python数据类型----> json 数据格式 ----> 字符串 ----> 文件 其他语言想要使 ...

  5. go 语言结构控制

    if  else 结构: #第一种 if condition { // do something } #第二种 if condition { // do something } else { // d ...

  6. MVC的实体模型写在类库，为什么被其他类库调用时，用不了模型的表？

    一,很简单,由于第一次添加实体模型时,VS会自动帮你添加引用System.Data.Entity到当前类库,如下图示: 二,而手动添加的类库并不存在这个引用,则及时你引用了当前的实体模型的类库,却使用 ...

  7. Java中的动态代理（jdk和cglib）

    JAVA的动态代理 代理模式 代理模式是常用的java设计模式,他的特征是代理类与委托类有同样的接口,代理类主要负责为委托类预处理消息.过滤消息.把消息转发给委托类,以及事后处理消息等.代理类与委托类 ...

  8. spring 事物（二）—— 编程式事物实现与扩展

    简介 使用TransactionTemplate 不需要显式地开始事务,甚至不需要显式地提交事务.这些步骤都由模板完成.但出现异常时,应通过TransactionStatus 的setRollback ...

  9. β版本apk下载地址及源代码github地址

    β版本下载地址   源代码下载地址:https://github.com/U-Help/Version-1.0 安装包下载地址:百度网盘:(密码q3sy)https://pan.baidu.com/s ...

  10. Winsock编程原理——面向连接

    Winsock编程原理——面向连接 Windows Sockets使用套接字进行编程,套接字编程是面向客户端/服务器模型而设计的,因此系统中需要客户端和服务器两个不同类型的进程,根据连接类型的不同,对 ...