この要素をページの中央に配置する - CSS

Question

私はかなり長い間この戦いをしてきましたが、私は運があまりありません。

私は基本的に私のコントロールがこのコンポーネントをページの中央に配置したいと思っています。また、中心軸（YまたはX、それは問題ではありません）の周りにそれを回転させる（3D）が必要ですが、私はちょうど中心にそれを取得している最初のステップで運がないです。

<div className="note-container"> 
       <div className="note" 
        style={Object.assign({}, note.position) }> 
        <p>{note.text}</p> 
        <span> 
         <button onClick={() => onExpand(note.id) } 
          className="btn btn-warning glyphicon glyphicon-resize-full"/> 
         <button onClick={() => onEdit(note.id) } 
          className="btn btn-primary glyphicon glyphicon-pencil"/> 
         <button onClick={onRemove} 
          className="btn btn-danger glyphicon glyphicon-trash"/> 
        </span> 
       </div> 
      </div> 

私はセンターにそれを再配置するために呼んでいる関数は、ここでfunction onExpand(noteId){...}

で.note-containerと.note

div.note-container { 
    position: fixed; 
    top: 5%; 
    left: 90%; 
} 

div.note { 
    height: 150px; 
    width: 150px; 
    background-color: yellow; 
    margin: 2px 0; 
    position: relative; 
    cursor: -webkit-grab; 
    -webkit-box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, .2); 
    box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, .2); 
} 

div.note:active { 
    cursor: -webkit-grabbing; 
} 

div.note p { 
    font-size: 22px; 
    padding: 5px; 
    font-family: "Shadows Into Light", Arial; 
} 

div.note div.back p { 
    font-size: 30px; 
    padding: 5px; 
    font-family: "Shadows Into Light", Arial; 
} 

div.note:hover> span { 
    opacity: 1; 
} 

div.note> span { 
    position: absolute; 
    bottom: 2px; 
    right: 2px; 
    opacity: 0; 
    transition: opacity .25s linear; 
} 

div.note button { 
    margin: 2px; 
} 

div.note> textarea { 
    height: 75%; 
    background: rgba(255, 255, 255, .5); 
} 

ためのCSSであり、ここでonExpand機能は

onExpand(noteId) { 

    //This needs a lot of work.... 
    event.preventDefault(); 

    let flippedNote = this.props.notes 
     .filter(note => note.id === noteId)[0]; 
    flippedNote.position.transition = "1.0s"; 
    flippedNote.position.transformStyle = "preserve-3d"; 
    flippedNote.position.backgroundColor = "#3498db"; 
    flippedNote.position.color = "white"; 
    flippedNote.position.width = "300px"; 
    flippedNote.position.height = "300px"; 

    flippedNote.position.position = "absolute"; 
    flippedNote.position.right = `50% -${flippedNote.position.width/2}px`; 
    flippedNote.position.top = `50% -${flippedNote.position.height/2}px`; 
    // flippedNote.position.transform = "translate(-50%, -50%) rotateY(180deg)"; 

    this.setState({/*Stuff later... */}); 
} 

です

また、メモをレンダリングするときここで

position: { 
        right: randomBetween(0, window.innerWidth - 150) + "px", 
        top: randomBetween(0, window.innerHeight - 150) + "px", 
        transform: "rotate(" + randomBetween(-15, 15) + "deg)" 
       } 

は、ページのルックスで何htmlです：ページ上で私はこれが最初div.note要素にスタイル属性に渡されているものである（それこのロジックに基づいて、ページ上のランダムな位置に割り当てます私はまた、transform：translate（...）を使ってページ全体に付箋をドラッグしています。

Answer 1

がそれにこの週末に働いた後、最終的なソリューションです。

onExpand(noteId, currentNotePosition) { 

     event.preventDefault(); 
     let note = this.props.notes 
      .filter(specificNote => specificNote.id === noteId)[0]; 

     const centerOfWindow = { 
      left: window.innerWidth/2, 
      top: window.innerHeight/2 
     }; 

     if (!note.centered) { 
      note.position.transition = "all 1s"; 
      note.position.transformStyle = "preserve-3d"; 
      note.position.backgroundColor = "#3498db"; 
      note.position.color = "white"; 
      note.position.width = "300px"; 
      note.position.height = "300px"; 
      note.position.zIndex = "100"; 
      note.position.position = "relative"; 
      const offset = { 
       x: 150, 
       y: 150 
      }; 
      const translatedCoordinates = this.getCoordinateTarget(centerOfWindow, offset, currentNotePosition); 
      note.position.transform = `translate(${translatedCoordinates.x}px, ${translatedCoordinates.y}px) rotateY(180deg)`; 

      note.originalPosition = { 
       left: currentNotePosition.left, 
       top: currentNotePosition.top, 
       width: currentNotePosition.width, 
       movement: translatedCoordinates 
      }; 

      note.centered = true; 
     } else { 
      note.position.backgroundColor = "yellow"; 
      note.position.color = "black"; 
      note.position.width = "150px"; 
      note.position.height = "150px"; 
      note.position.transform = ""; 
      note.centered = false; 
     } 

     this.props.stickyNoteActions.repositionedNoteSuccess(Object.assign({}, note)); 
    } 

Answer 2

これを試してみてください。

div.note 
{ 
    position: relative; 
    width: 150px; 
    left: 0; 
    right: 0; 
    margin: 2px auto; 
} 

Answer 3

が位置を制御するために、あなたはdiv.noteにposition: relative;またはposition: absolute;を設定することができます。

これは、マージンを操作することによって行うこともできますが、実際には良い方法ではありません。

ブラウザでページを開き、Chromeの開発ツールを使用してCSS値を操作することで、コードを手動でテストできます。

ここ