text 片段，HTML，CSS-中心

Posted 2021-04-30

<h1 class="h1 align-center pd-t20">h1.title</h1>
<section id="jsApp--hello" class="Section-hello">
  <div class="inner">
    <div class="outer section-content">
      <h2 class="h2 css">h2.title</h2>
      <section class="Section">
        <div class="inner">
          <div class="outer cm300 flex flex-justify-c flex-align-c">
            <div class="d-ib">真ん中に配置</div>
          </div>
        </div>
      </section>
    </div>
  </div> 
</section>

new Vue ({
  el: '#jsApp--hello',
  //components: { myComponent },
  data() {
    return {
      message: 'hello',
    }
  },
  created() {
    
  },
  computed: {

  },
  methods: {

  },
  mounted() {

  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js"></script>

snippets-html-css-centering
---------------------------


A [Pen](https://codepen.io/kote2kote/pen/aMVara) by [kote2](https://codepen.io/kote2kote) on [CodePen](https://codepen.io).

[License](https://codepen.io/kote2kote/pen/aMVara/license).

body {
 background-color: #1D364C;
 height: 100vh;
}

.h2.css {
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
  padding: 10px 0;
  margin: 50px 0 10px;
  
  & + * {
    padding-left: 20px;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" rel="stylesheet" />
<link href="https://codepen.io/kote2kote/pen/xBKqMP.css?1" rel="stylesheet" />