在swiper-slide中水平垂直居中元素flex实现

代码结构:

<!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586935483760&di=75ca9f154573e86a9ddf126c17b27bbc&imgtype=0&src=http%3A%2F%2F00.minipic.eastday.com%2F20170925%2F20170925105058_d41d8cd98f00b204e9800998ecf8427e_2.jpeg" alt="">
        <div class="swiper-title">
          <div class="title-cont">
            <div class="swiper-title-cont">
              <h2>我是主标题</h2>
              <h3>我是副标题</h3>
            </div>
            <a href="#">点击详情</a>
          </div>
        </div>
      </div>
    </div>
  </div>

样式内容:

 .swiper-container {
      width: 100%;
      height: 30%;
    }
    .swiper-slide img{
      width: 100%;
      height: 100%;
      vertical-align: top;
     }
     .swiper-title
     {
       position: absolute;
       display: flex;
       left: 0;
       right: 0;
       bottom: 0;
       top: 0;
       margin: auto;
       align-items: center;
       justify-content: center;
       font-size: 12px;
       text-align: center;
       color: #fff;
     }
     .title-cont{
       position: absolute;
        flex: 1;
     }

实现效果:

原文地址:https://www.cnblogs.com/xiaojianwei/p/12704536.html

时间: 04-15

在swiper-slide中水平垂直居中元素flex实现的相关文章

css实现子层在父层中水平垂直居中

例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Cont

CSS实现图片在div a标签中水平垂直居中

CSS实现图片在div a标签中水平垂直居中 <div class="demo"> <a href="#"> <img src="test.jpg" /> </a></div> /*For Firefox Chrome*/.demo{border:1px #ddd solid;width:208px;height:148px;overflow:hidden;text-align:cent

CSS子元素在父元素中水平垂直居中的几种方法

1. 水平居中(margin: auto;)子父元素宽度固定,子元素上设置 margin: auto; 子元素不能设置浮动,否则居中失效. #div1{ width: 300px; height: 300px; border: 1px solid red; } #div1 p { width: 100px; height: 100px; background-color: green; /*float: left; !*如果设置了浮动,则自动居中就会失效.*!*/ margin: 0 auto;

img标签在div中水平垂直居中--两种实现方式

第一种方式: text-align:center; vertical-align:middle; div{ text-align: center; vertical-align:middle;width: 400px; height: 400px; border: 1px solid #000; } img{vertical-align: middle} span{height: 100%;vertical-align: middle;display: inline-block} <div st

css中元素水平垂直居中4种方法介绍

table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对block元素不起作用,但对table-cell元素是有效的)设置元素垂直居中,即可达到我们想要的效果. IE7及以下版本不支持此方法,IE8及以上版本及大部分的主流浏览器都很好的支持. HTML代码  代码如下   <div class="img">    <img src=

【居中系列】大小不固定的图片在固定容器中的水平垂直居中

一般在做产品页面的时候,如果产品图片宽高定死的话,有的图片就会变形,如果把宽给个最大宽,高自适应的话有的图又会由于是个长方形高超出了容器,这样就不得不截掉一部分图.于是就想着,首先不管图片是个什么比例,不管它是宽远大于高或者高远大于宽,统一设置最大的宽高值,不让它超出容器,并且这样处理图片不会变形.接下来想怎么处理图片大小不定,在固定容器中水平垂直居中的问题. 参考链接: 张鑫旭:大小不固定的图片和多行文字的垂直水平居中 w3cplus大漠:css制作图片水平垂直居中 对比了一下他们的方法,发现

CSS水平垂直居中的几种方法

直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; border: 1px solid #465468; } img{ position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; } HTML代码: <div> <img src="mm.jpg&quo

CSS水平垂直居中的几种方法2

直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; border: 1px solid #465468; } img{ position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; } HTML代码: <div> <img src="mm.jpg&quo

Flexbox制作CSS布局实现水平垂直居中

Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head>  <meta charset="utf-8"/>  <title>Flexbox制作CSS布局实现水平垂直居中</title>  <style type="text/css">    html {      height: 1