Question

我有以下jsfiddle（我抽样了一点）。

<body>
  <div class="title">
    <div id="val">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur condimentum ullamcorper magna ut vulputate. Mauris hendrerit neque et risus feugiat aliquet. Donec non ullamcorper justo. In efficitur mauris sagittis neque vulputate sodales. Fusce
      placerat tortor sapien, in posuere ante egestas quis. Ut lobortis semper volutpat. Phasellus enim enim, facilisis non elit in, ultricies efficitur purus. Ut sit amet posuere lorem, vitae aliquet enim. Suspendisse commodo mollis dictum. Nulla facilisi.
      Aenean vitae ante sem. Sed vel lectus tincidunt, interdum erat eu, aliquet leo. Nam at iaculis lectus. Vestibulum dui mi, laoreet id bibendum in, volutpat sit amet eros. Donec nec mattis nisi, id laoreet enim. Cras tristique massa et iaculis consectetur.
      Vivamus gravida consectetur vestibulum. Ut eget orci neque. Aenean eget finibus dui. Vestibulum ac fringilla sem. Morbi venenatis rhoncus dictum. Nulla ac suscipit tortor. Nulla sit amet metus odio. Pellentesque imperdiet laoreet orci, vitae vulputate
      nulla consequat a. Pellentesque tempor lorem sit amet neque aliquam molestie. Ut ultrices vitae felis a blandit. Suspendisse non egestas justo, eget sagittis dolor. Morbi ac blandit ex. Aliquam porta sem quis justo interdum, a venenatis massa blandit.
      Suspendisse feugiat vestibulum eros, vel aliquet nisl porttitor quis. Duis eu dignissim ante. Mauris urna nisl, scelerisque nec eleifend ut, malesuada non urna. Cras a ultricies magna. Donec diam justo, ornare at mauris ac, tempor pretium urna.
      Aenean id consectetur est. Morbi eu libero ultricies, accumsan erat at, efficitur ipsum. Morbi magna risus, rhoncus ac velit mollis, dapibus finibus tortor. Integer lectus odio, vulputate non nibh at, gravida rhoncus lectus. Cras posuere odio luctus
      facilisis varius. Mauris accumsan nunc nisl, vel blandit quam gravida in. Maecenas ac diam eget ante fermentum pretium in ut ex. Phasellus et enim non ligula iaculis pretium. Cras ac lacinia ipsum, non porta nunc. Maecenas id turpis justo. Duis
      nulla turpis, laoreet vitae viverra a, porta et est. Nulla venenatis non erat eu vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras et convallis quam. Curabitur pellentesque mi aliquet aliquet
      condimentum. Duis semper ante et facilisis auctor. Proin turpis est, placerat nec condimentum ac, ornare eget sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ligula ex, porta vel magna nec, sodales dapibus augue. Cras auctor
      diam non sem tincidunt aliquam. Curabitur lobortis tortor porta, volutpat mi id, sagittis dolor. Nam rhoncus tortor nec ipsum vulputate, sed fermentum ligula consequat. Fusce ullamcorper augue ac lobortis euismod. Mauris ut mi vitae ipsum accumsan
      commodo. Etiam nunc purus, scelerisque vitae nibh molestie, porttitor gravida ipsum.</div>
  </div>
</body>

我试图将文本居中并尝试在文本溢出时滚动文本。我不确定什么是错的。我尝试将位置从绝对更改为固定或相对，但没有任何效果。我做错了什么。

Answer 1

从position: absolute;删除了.title，并从html中删除了overflow: hidden;

@import url(https://fonts.googleapis.com/css?family=Montserrat);
html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

html {
  position: relative;
  background: #FF4E50;
  background: -webkit-linear-gradient(right, #FF4E50, #F9D423);
  background: linear-gradient(to left, #FF4E50, #F9D423);
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  font-family: Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.title {
  text-align: center;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 80px;
  text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.title a {
  color: #fff;
  text-transform: none;
  text-decoration: none;
  font-size: 50px;
  letter-spacing: 0;
}

<body>
  <div class="title">
    <div id="val">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur condimentum ullamcorper magna ut vulputate. Mauris hendrerit neque et risus feugiat aliquet. Donec non ullamcorper justo. In efficitur mauris sagittis neque vulputate sodales. Fusce
      placerat tortor sapien, in posuere ante egestas quis. Ut lobortis semper volutpat. Phasellus enim enim, facilisis non elit in, ultricies efficitur purus. Ut sit amet posuere lorem, vitae aliquet enim. Suspendisse commodo mollis dictum. Nulla facilisi.
      Aenean vitae ante sem. Sed vel lectus tincidunt, interdum erat eu, aliquet leo. Nam at iaculis lectus. Vestibulum dui mi, laoreet id bibendum in, volutpat sit amet eros. Donec nec mattis nisi, id laoreet enim. Cras tristique massa et iaculis consectetur.
      Vivamus gravida consectetur vestibulum. Ut eget orci neque. Aenean eget finibus dui. Vestibulum ac fringilla sem. Morbi venenatis rhoncus dictum. Nulla ac suscipit tortor. Nulla sit amet metus odio. Pellentesque imperdiet laoreet orci, vitae vulputate
      nulla consequat a. Pellentesque tempor lorem sit amet neque aliquam molestie. Ut ultrices vitae felis a blandit. Suspendisse non egestas justo, eget sagittis dolor. Morbi ac blandit ex. Aliquam porta sem quis justo interdum, a venenatis massa blandit.
      Suspendisse feugiat vestibulum eros, vel aliquet nisl porttitor quis. Duis eu dignissim ante. Mauris urna nisl, scelerisque nec eleifend ut, malesuada non urna. Cras a ultricies magna. Donec diam justo, ornare at mauris ac, tempor pretium urna.
      Aenean id consectetur est. Morbi eu libero ultricies, accumsan erat at, efficitur ipsum. Morbi magna risus, rhoncus ac velit mollis, dapibus finibus tortor. Integer lectus odio, vulputate non nibh at, gravida rhoncus lectus. Cras posuere odio luctus
      facilisis varius. Mauris accumsan nunc nisl, vel blandit quam gravida in. Maecenas ac diam eget ante fermentum pretium in ut ex. Phasellus et enim non ligula iaculis pretium. Cras ac lacinia ipsum, non porta nunc. Maecenas id turpis justo. Duis
      nulla turpis, laoreet vitae viverra a, porta et est. Nulla venenatis non erat eu vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras et convallis quam. Curabitur pellentesque mi aliquet aliquet
      condimentum. Duis semper ante et facilisis auctor. Proin turpis est, placerat nec condimentum ac, ornare eget sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ligula ex, porta vel magna nec, sodales dapibus augue. Cras auctor
      diam non sem tincidunt aliquam. Curabitur lobortis tortor porta, volutpat mi id, sagittis dolor. Nam rhoncus tortor nec ipsum vulputate, sed fermentum ligula consequat. Fusce ullamcorper augue ac lobortis euismod. Mauris ut mi vitae ipsum accumsan
      commodo. Etiam nunc purus, scelerisque vitae nibh molestie, porttitor gravida ipsum.</div>
  </div>
</body>

Answer 2

您正在使用html overflow:hidden，因此请更改overflow:auto;并且您的文字已经居中。

更新css部分

html {
  position: relative;
  background: #FF4E50;
  background: -webkit-linear-gradient(right, #FF4E50, #F9D423);
  background: linear-gradient(to left, #FF4E50, #F9D423);
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  overflow: auto; /*Add this or remove it */
  font-family: Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.title {
  /*position: absolute;*/
  /*top: 40%;*/
  /*left: 0;*/
  /*right: 0;*/
  /*-webkit-transform: translateY(-50%);*/
  /*transform: translateY(-50%);*/
  text-align: center;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 80px;
  text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

＆＃13;

@import url(https://fonts.googleapis.com/css?family=Montserrat);
html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

html {
  position: relative;
  background: #FF4E50;
  background: -webkit-linear-gradient(right, #FF4E50, #F9D423);
  background: linear-gradient(to left, #FF4E50, #F9D423);
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  overflow: auto;
  font-family: Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.title {
  /*position: absolute;*/
  /*top: 40%;*/
  /*left: 0;*/
  /*right: 0;*/
  /*-webkit-transform: translateY(-50%);*/
  /*transform: translateY(-50%);*/
  text-align: center;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 80px;
  text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.title a {
  color: #fff;
  text-transform: none;
  text-decoration: none;
  font-size: 50px;
  letter-spacing: 0;
}

＆＃13;

<body>
  <div class="title">
    <div id="val">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur condimentum ullamcorper magna ut vulputate. Mauris hendrerit neque et risus feugiat aliquet. Donec non ullamcorper justo. In efficitur mauris sagittis neque vulputate sodales. Fusce
      placerat tortor sapien, in posuere ante egestas quis. Ut lobortis semper volutpat. Phasellus enim enim, facilisis non elit in, ultricies efficitur purus. Ut sit amet posuere lorem, vitae aliquet enim. Suspendisse commodo mollis dictum. Nulla facilisi.
      Aenean vitae ante sem. Sed vel lectus tincidunt, interdum erat eu, aliquet leo. Nam at iaculis lectus. Vestibulum dui mi, laoreet id bibendum in, volutpat sit amet eros. Donec nec mattis nisi, id laoreet enim. Cras tristique massa et iaculis consectetur.
      Vivamus gravida consectetur vestibulum. Ut eget orci neque. Aenean eget finibus dui. Vestibulum ac fringilla sem. Morbi venenatis rhoncus dictum. Nulla ac suscipit tortor. Nulla sit amet metus odio. Pellentesque imperdiet laoreet orci, vitae vulputate
      nulla consequat a. Pellentesque tempor lorem sit amet neque aliquam molestie. Ut ultrices vitae felis a blandit. Suspendisse non egestas justo, eget sagittis dolor. Morbi ac blandit ex. Aliquam porta sem quis justo interdum, a venenatis massa blandit.
      Suspendisse feugiat vestibulum eros, vel aliquet nisl porttitor quis. Duis eu dignissim ante. Mauris urna nisl, scelerisque nec eleifend ut, malesuada non urna. Cras a ultricies magna. Donec diam justo, ornare at mauris ac, tempor pretium urna.
      Aenean id consectetur est. Morbi eu libero ultricies, accumsan erat at, efficitur ipsum. Morbi magna risus, rhoncus ac velit mollis, dapibus finibus tortor. Integer lectus odio, vulputate non nibh at, gravida rhoncus lectus. Cras posuere odio luctus
      facilisis varius. Mauris accumsan nunc nisl, vel blandit quam gravida in. Maecenas ac diam eget ante fermentum pretium in ut ex. Phasellus et enim non ligula iaculis pretium. Cras ac lacinia ipsum, non porta nunc. Maecenas id turpis justo. Duis
      nulla turpis, laoreet vitae viverra a, porta et est. Nulla venenatis non erat eu vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras et convallis quam. Curabitur pellentesque mi aliquet aliquet
      condimentum. Duis semper ante et facilisis auctor. Proin turpis est, placerat nec condimentum ac, ornare eget sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ligula ex, porta vel magna nec, sodales dapibus augue. Cras auctor
      diam non sem tincidunt aliquam. Curabitur lobortis tortor porta, volutpat mi id, sagittis dolor. Nam rhoncus tortor nec ipsum vulputate, sed fermentum ligula consequat. Fusce ullamcorper augue ac lobortis euismod. Mauris ut mi vitae ipsum accumsan
      commodo. Etiam nunc purus, scelerisque vitae nibh molestie, porttitor gravida ipsum.</div>
  </div>
</body>

＆＃13;

Answer 3

当然这么容易！

变化

<div id="val">

到

<div id="val" align="center">

从你移动css html {}

overflow: hidden;

给你css body

body {
    overflow: hidden;
}

并在你的css中添加一个新对象，val

#val {
    overflow: y;
}

享受此代码。

尝试居中和滚动文本

3 个答案: