投稿

div在不固定高度的情况下如何水平垂直居中

ZERO • • CSS • 1239 views 
<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>自适应高度下div水平垂直居中</title>
    </head>
    <style>
      * {
         padding: 0;
         margin: 0;
       }
       /* flex居中 */
       .tith1 {
         display: flex;
         justify-content: center;
         align-items: center;
         background: red;
        }
        /* table居中 */
        .tith2 {
          text-align: center;
          width: 100%;
          display: table;
          background: blue;
         }
        .tith2 > span {
          display: table-cell;
          vertical-align: middle;
         }
      </style>
      <body>
        <p class="tith1">
          <span>123</span>
        </p>
        <p class="tith2">
          <span>123</span>
        </p>
      </body>
    </html>
Like (0)
Donate 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
ZEROZERO
0 0
Previous 2021年2月22日
Next 2021年2月23日

相关推荐

  • flex布局详解 CSS

    flex布局详解

    往往在移动端开发过程中，弹性布局是非常实用的一种手段。往往你并不需要去反复的使用媒体查询的。整整的响应式布局是使界面能够自动的根据屏幕进行变化，做到完美的弹性布局，在必要的时候，去…

    ZERO ZERO
    2018年9月10日
    2.1K
  • css晦涩难懂的点都在这啦 CSS

    css晦涩难懂的点都在这啦

    CSS大家肯定都是会的但是每个人所撑握的情况都不一样，特别是已经工作几年的前辈(这里指的是我司)很多CSS玩法都不知道，可能他们已经习惯了用组件， 但是面试的时候又不可避免问，所以…

    ZERO ZERO
    2021年1月20日
    1.2K
  • CSS布局 CSS

    CSS布局之圣杯与双飞翼布局

    所谓圣杯布局和双飞翼布局其实解决的问题是相同的，都是解决左右两栏固定宽度，中间部分自适应，其中某部分内容比其他内容高的时候，保证三者元素等高。他俩的区别就是：圣杯用padding。…

    ZERO ZERO
    2019年6月18日
    1.8K
  • 等高布局 CSS

    CSS多列等高布局

    在项目开发中，经常遇到需要多列等高布局的需求。解决这种的需求的方法有很多，各有利弊，现总结如下。 方法一：使用flex布局 优点：实现方便，还可以方便实现各种比例 ； 缺点: IE…

    ZERO ZERO
    2019年6月11日
    2.1K
  • css如何利用transparent属性设置透明度？transparent属性绘制各种三角形 CSS

    css如何利用transparent属性设置透明度？transparent属性绘制各种三角形

    想到用css设置元素透明度，大家的第一反应会是：用Opacity属性来设置透明度，其实在css中还有其他设置透明度的方法。本章给大家介绍用transparent属性设置透明度，以及…

    ZERO ZERO
    2021年2月25日
    1.2K
  • css盒模型 CSS

    css布局基础总结

    前端css布局知识繁杂，实现方式多种多样。想写出高效、合理的布局，必须以深厚的css基础为前提。为了方便记忆和复习，将css布局要点记录如下。内容较多，应用方面说的不太详细，但都是…

    ZERO ZERO
    2018年9月13日
    2.2K
  • px,em,rem CSS

    px、em和rem实战经验

    在自适应布局或者移动端网页开发时，我们经常会用到em和rem两个长度单位。接下来我们讨论一下这两个单位和px之间的区别，以及他们的使用场景等。 px px，像素(计算机屏幕上的一个…

    ZERO ZERO
    2018年9月11日
    1.9K
  • CSS布局 CSS

    CSS让内容居中的方法总结

    内容水平居中  分行内元素与块级元素两种情况；其中块级元素又分定宽与不定宽两种情况； 行内元素 首先看它的父元素是不是块级元素，如果是，则直接给父元素设置 te…

    ZERO ZERO
    2019年6月28日
    3.1K
  • 两栏布局 CSS

    两栏布局之左侧固定，右侧自适应的实现方法

    实现左侧固定，右侧自适应的两栏布局的方法有很多。其中经常用到的有float方法、BFC方法、CSS3的flex布局及grid布局。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。

    ZERO ZERO
    2018年10月13日
    2.4K
  • 三栏布局 CSS

    网页布局之三栏网页宽度自适应布局

    在工作中经常遇到网页布局错乱的问题，往往引发的这种问题都是因为不同设备不同分辨率而导致。归根结底，是因为前端工程师经验不足，代码写得不够完好。以下是我总结及从网络搜集的一些网页布局…

    ZERO ZERO
    2018年10月8日
    2.8K