<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        html,body{

            width: 100%;

            height: 100%;

            font-size: 16px;

        }

        *{margin: 0;padding: 0;}

        .box1{

            width: 200px;height: 200px;

            background: #eee;

            margin-top: 10px;

            /*定位居中*/

            position: relative;

        }

        .box2{

            width: 200px;height: 200px;

            background: #eee;

            margin-top: 10px;

            /*margin居中*/

            position: relative;

        }

        .box3{

            width: 200px;height: 200px;

            background: #eee;

            margin-top: 10px;

            /*inline居中*/

            text-align: center;

        }

        /*定位+transform居中*/

        .box1 div{border: 1px solid #000;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%)}

        /*margin居中*/

        .box2 div{border: 1px solid #000;position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin:auto;width: 100px;height: 50px}

        /*inline居中*/

        .box3 div{border: 1px solid #000;display: inline-block;vertical-align: middle;}

        .box3:before{content: '';  display: inline-block;  height: 100%;  vertical-align: middle;}

    </style>

</head>

<body>

<div class="box1">

    <div>我想居中</div>

</div>

<div class="box2">

    <div>我想居中</div>

</div>

<div class="box3">

    <div>我想居中</div>

</div>

</body>

</html>

demo:https://controllerone.github.io/test/

css上下左右居中的更多相关文章

  1. CSS上下左右居中对齐

    上下左右居中对齐 display:  inline/inline-block 将父元素(容器)设定 text-align: center: 即可左右置中. display: block 将元素本身的 ...

  2. CSS上下左右居中的几种方法

    1.absolute,margin: auto .container { position: relative; } .content { position: absolute; margin: au ...

  3. css：子元素div 上下左右居中方法总结

    最近在面试,不停地收到了知识冲击,尤其是对于一些基础的css.html.js问题居多,所以自我也在做反思,今天就css问题,如何让一个子元素div块元素上下左右居中 (以下总结方法,都已得到验证). ...

  4. 只用CSS实现容器内图片上下左右居中

    一直以来,大家都知道,DIV容器内设置 text-align:center 即可让图片居中,但是DIV内默认的图片是上对齐,不会上下居中,如果想要实现这样的效果,JS判断是比较麻烦的,因为DIV容器内 ...

  5. css布局之块上下左右居中

    以下方案的通用代码: HTML code: <div class="box"> <div class="content"> <!- ...

  6. 用CSS让DIV上下左右居中的方法

    转载自喜欢JS的无名小站 例如 一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念 利用表格 ...

  7. CSS 控制元素 上下左右居中

    不说废话,直接 搞起..... 首先,我们将题目 <css控制元素上下左右居中> 分析一下哈,我是将其分成了4部分信息: 1.CSS控制: 只用 CSS 来达成目的 2.元素:  不只是d ...

  8. css div上下左右居中

    相信大家都会遇到这样的问题,要求一个块上下左右居中,在这里我总结了几个好用的方法 1.已知要居中的块width height 假设  content 要在f里上下左右居中 <div class＝ ...

  9. div元素上下左右居中

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

随机推荐

  1. curl http_code 状态码

    1.只得到一个url的http_code的状态码 curl -I -m 10 -o /dev/null -s -w %{http_code} http://127.0.0.1/a.html 查询hea ...

  2. SQLServer 2008 还原数据库备份版本不兼容的问题

    我们准备还原一个数据库备份的时候,经常会弹出这样的错误:System.Data.SqlClient.SqlError: 该数据库是在运行版本 10.50.1600 的服务器上备份的.该版本与此服务器( ...

  3. Python全栈开发：configparser模块

    #!/usr/bin/env python # -*- coding;utf-8 -*- import configparser # 创建对象 conn = configparser.ConfigPa ...

  4. csps模拟67神炎皇，降雷皇，幻魔皇题解

    题面:https://www.cnblogs.com/Juve/articles/11648975.html 神炎皇: 打表找规律?和$\phi$有关? 答案就是$\sum\limits_{i=2}^ ...

  5. DRF 请求生命周期以及各模块解析

    目录 rest_framework框架的封装特点 原生Django与DRF比较 APIView 的请求生命周期 请求模块(request) 解析模块(parser_classes) 异常模块(exce ...

  6. Office宏的基本利用

    前言 Office宏,译自英文单词Macro.宏是Office自带的一种高级脚本特性,通过VBA代码,可以在Office中去完成某项特定的任务,而不必再重复相同的动作,目的是让用户文档中的一些任务自动 ...

  7. Java-MyBatis-MyBatis3-XML映射文件：缓存

    ylbtech-Java-MyBatis-MyBatis3-XML映射文件:缓存 1.返回顶部 1. 缓存 MyBatis 内置了一个强大的事务性查询缓存机制,它可以非常方便地配置和定制. 为了使它更 ...

  8. CAAnimation动画

    具有动画效果的keyPath //CATransform3D Key Paths : (example)transform.rotation.z //rotation.x //rotation.y / ...

  9. final关键字与类型转换

    一.关于final的重要知识点; 1.final关键字可以用于成员变量.本地变量.方法以及类. 2. final成员变量必须在声明的时候初始化或者在构造器中初始化,否则就会报编译错误. 3. 你不能够 ...

  10. Maven入门指南

    Maven入门指南 本指南旨在第一次为使用Maven的人员提供参考,但也打算作为一本包含公共用例的独立参考和解决方案的工具书.对于新用户,建议您按顺序浏览该材料.对于更熟悉Maven的用户,本指南致力 ...