css flex布局实现文字垂直居中

置顶 已于 2023-08-15 10:31:02 修改
阅读量1.3w 收藏 20
点赞数 14
分类专栏： # CSS 文章标签： css flex html 脚本语言
于 2021-01-05 10:23:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46149348/article/details/112215225
版权
  • 在没使用flex之前，垂直居中最常用的方法就是将容器的line-height设置为和容器一样的高度，但这种方法很生硬，每次需要更改容器高度的时候都需要考虑line-height，使用以下这种方法可以实现自适应的垂直居中！
<style>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
<style>
    .innner {
        display: flex;
        background-color: #ea4d22;
        height: 100px;
        /* line-height: 100px; */
        /* text-align: center; */
        justify-content: center;
        flex-direction: column;
    }
    .innner2 {
        background-color: #20e64b;
        height: 100px;
        text-align: center;
    }
    .innner3 {
        display: flex;
        background-color: #18a0c2;
        height: 100px;
        /* line-height: 100px; */
        text-align: center;
        justify-content: center;
        flex-direction: column;
    }


</style>
<div class="innner">垂直居中示例</div>
<div class="innner2">水平居中示例</div>
<div class="innner3">垂直水平居中示例</div>

</body>
</html>

在这里插入图片描述

微信小程序——flex弹性布局水平垂直居中
wangqing830414的专栏
11-02 1930
实现最终效果 <!--index.wxml--> <view class="body"> <view class="out"> <view class='in'> <text>in</text> </view> </view> </view> /**index.wxss**/ .body{ display: flex; justify-conten
css flex布局两个元素水平居中垂直居中
xiaohua616的博客
04-23 889
使用flex布局，让两个元素水平居中垂直居中，具体实现效果如下：
css用flex实现字体垂直居中对齐
weixin_60122365的博客
10-30 3404
css用flex实现字体垂直居中对齐
flex布局 文字水平垂直居中
qq_17627195的博客
08-20 2839
display: flex; align-items: center; justify-content: center; 就酱
flex布局实现垂直居中
weixin_46370867的博客
04-13 5794
使用flex布局实现居中布局的步骤： 父级元素使用flex布局 父级元素使用align-items: center; 代码示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport"
flex垂直居中_CSS实现居中
weixin_39553352的博客
11-21 1699
一、水平居中1.1 要居中的是内联元素或者行内-块级元素？（比如文字或链接） 块级父元素设置text-align为center则其内内联元素水平居中。This will work for inline, inline-block, inline-table, inline-flex, etc.1.2 要居中的是块级元素？ 设定了宽度的块级元素（不设定宽度将会自动铺满那就不需要水平居中啦...
Flexbox制作CSS布局实现水平垂直居中的简单实例
12-13
Flexbox实现一个div元素在body页面中水平垂直居中： ... <!... <...Flexbox制作CSS布局实现水平垂直居中</title>  <style type="text/css">  html { height: 100%; }  body
CSS网页布局：div垂直居中的各种方法
12-10
在CSS布局中，垂直居中是一项常见的需求，但相比水平居中，它的实现方式更为多样且复杂。在本文中，我们将探讨如何通过不同的方法在网页布局中实现div元素的垂直居中。 首先，我们注意到CSS的`vertical-align`属性...
css3 flex实现div内容水平垂直居中的几种方法
11-21
总的来说，CSS3的Flexbox布局提供了一种强大的方法来处理元素的布局和对齐，使得水平垂直居中变得简单而直观。通过熟练掌握这些基本属性，开发者可以构建出更复杂、更适应不同屏幕尺寸的网页布局。
Flex布局实现div内部子元素垂直居中的示例
01-21
任何一个容器都可以指定为Flex布局。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。  采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为...
【CSS】让文字垂直居中的方法
最新发布
shifff的博客
07-31 5328
推荐使用 Flexbox 或 CSS Grid 的方法，这两种方法不仅简单易用，而且兼容性好，适用于各种场景。方法也可以在简单的单行文本垂直居中效果中使用。如果你更加灵活地调整，你可能需要结合多个方法。通过这些方法，你可以确保文本在容器中垂直居中，并且在不同的设备和分辨率下都能保持良好的显示效果。
flex布局实现元素的垂直居中
kassiaaaa的博客
07-19 6650
转载：[转载自这里](https://blog.csdn.net/amberqu/article/details/79700974) 转 Flex实现元素的水平居中和垂直居中 ...
常用的几种布局方式---Flex 布局(垂直居中展示）
weixin_64310738的博客
02-14 2万+
常用的几种布局方式---Flex 布局(垂直居中展示）
【前端攻略】最全面的水平垂直居中方案与flexbox布局
weixin_33755649的博客
04-21 186
最近又遇到许多垂直居中的问题，这是Css布局当中十分常见的一个问题，诸如定长定宽或不定长宽的各类容器的垂直居中，其实都有很多种解决方案。而且在Css3的flexbox出现之后，解决各类居中问题变得更加容易了。搜了搜园子内关于flexbox的文章觉得很多不够详尽，故想借介绍flexbox的同时好好总结一番各类垂直居中的方法。由简至繁：   行内元素的水平居中     要实现行内元素（&lt;s...
flex布局以及实现垂直居中
weixin_49519788的博客
06-21 3万+
flex布局的原理 给父盒子添加flex属性，来控制盒子的位置和排列方式（当我们给父元素设置为flex布局以后，子元素的float、clear和vertical-align属性将失效） flex:布局又叫伸缩布局，弹性布局，伸缩盒布局，flex布局 flex常见的父项常见属性 flex-direction：设置主轴的方向 justify-content：设置主轴上的子元素排列方式 flex-wrap：设置子元素是否换行 align-content：设置侧轴上的子元素的排列方式（多行） align-items
CSS flex样式垂直居中
热门推荐
黄彪博客
07-15 7万+
文章参考 Flex 布局教程：语法篇 问题描述 由于div默认是没有高度的，如果设置了高度，默认是从左到右，从上到下的顺序来排布； 如果要做垂直居中，就需要计算div控件的高度，如果内容变多或者变少，又会导致定位不准确，因此，最稳妥的办法就是让浏览器自己去根据div的高度居中显示 flex 个人理解 作用自身的样式 flex-direction属性决定主轴的方向（即项目的排列方向） flex...
flex布局垂直居中
pyj2017的博客
05-21 1372
使用flex布局实现下面图中效果： 外框高都为400px,边框为2px；圆的宽高为100px；中圆是水平居中；下圆是水平居中以及相对于中圆垂直居中（下圆到中圆的距离和下圆到下边框的距离相等）。效果如图： 我的实现方法是笨办法，大佬们多指点 <div class="box"> <div class="item"> <div class="child"> </div> </di
图片和文字垂直居中-flex布局
baozhuona的博客
11-16 1万+
因为float和position用的比较熟，所以flex只是了解了一下，基本不用。但是今天发现了flex在处理图片和文字对齐方便真是超爽der~ 1.需求 就是一个盒子里面，图片和文字垂直居中 2.惯用套路 我之前的解决思路都是给图片设margin，给文字设line-height, 为了适配单位一般都不是px,用百分比设置，基本都是靠调试效果调出来的，非常不
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一只月月鸟呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值